Mikel
[转载]Jquery 图片轮播实现原理总结 – 冲杀 – 博客园.
以前要做图片轮播效果的时候，总是在网上找一段JQuery的复制粘贴进去，只索取不奉献，今个就把我对这个的实现原理讲解一下。
首先说下，我在网上找的例子全是用的UL 实现，其实大可不必，只要是能包含img标签的HTML标签都可以做轮播效果。利用JQuery的淡入淡出函数（fadeIn和fadeOut）。废话也不多说，边上代码边讲解。最后附上demo效果地址。
先HTML布局:
<!--整体容器--><div class="imgbox"><!--图片列表，除第一张显示外，其余隐藏--><ul> <li style="display: block;" title="清灵少女宛如梦境仙女"><a href="#"> <li title="美女海边性感透视装诱惑"><a href="#"> <li title="夏小薇：百变小魔女变身性感数码宝贝"><a href="#"> <li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#"></ul><div class="title_bg common"><!--图片标题背景--></div><!--图片显示标题--><div class="title common"></div><!--图片序号--><div class="pager common"><ul> <li>4</li> <li>3</li> <li>2</li> <li style="background: #FF70Ad;">1</li></ul></div></div> |
CSS部分：
img{border-style:none;}.imgbox{width:530px;margin:100px;height:350px;}.imgbox img{width:530px;height:350px;}.imgbox ul{list-style-type:none;margin:0px;padding:0px;}.imgbox ul li{display:none;}.title_bg{z-index:1;background-color:#000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;}.title{z-index:2;color:#FFF;text-indent:10px;font-size:14px;line-height:40px;}.pager{z-index:3;}.common{position:relative;height:40px;margin-top:-43px;}.pager ul{margin-top:5px;}.pager ul li{float:right;color:#FFF;font-size:15px;display:block;border:2px solid #e5eaff;width:25px;height:25px;margin-right:4px;margin-top:5px;text-align:center;line-height:25px;background-color:#6f4f67;cursor:pointer;} |
脚本：
$(document).ready(function () {(new CenterImgPlay()).Start();});function CenterImgPlay() {this.list = $(".imgbox").children(":first").children();this.indexs = [];this.length = this.list.length;//图片显示时间this.timer = 3000;this.showTitle = $(".title");var index = 0, self = this, pre = 0, handid, isPlay = false, isPagerClick = false;this.Start = function () {this.Init();//计时器，用于定时轮播图片handid = setInterval(self.Play, this.timer);};//初始化this.Init = function () {var o = $(".pager ul li"), _i;for (var i = o.length - 1, n = 0; i >= 0; i--, n++) {this.indexs[n] = o.eq(i).click(self.PagerClick);}};this.Play = function () {isPlay = true;index++;if (index == self.length) {index = 0;}//先淡出，在回调函数中执行下一张淡入self.list.eq(pre).fadeOut(300, "linear", function () {var info = self.list.eq(index).fadeIn(500, "linear", function () {isPlay = false;if (isPagerClick) { handid = setInterval(self.Play, self.timer); isPagerClick = false; }}).attr("title");//显示标题self.showTitle.text(info);//图片序号背景更换self.indexs[index].css("background-color", "#FF70Ad");self.indexs[pre].css("background-color", "#6f4f67");pre = index;});};//图片序号点击this.PagerClick = function () {if (isPlay) { return; }isPagerClick = true;clearInterval(handid);var oPager = $(this), i = parseInt(oPager.text()) - 1;if (i != pre) {index = i - 1;self.Play();}};}; |
轮播的脚本是个人的一点小习惯，一般不轻易向JQuery中写入扩展函数.诸位莫要在意。
通过以上的代码，实现轮播的核心主要是对jQuery的fadeIn和fadeOut函数的调用，另外考察的就是CSS布局的功力了。
在上面显示图片标题的地方不能用绝对定位，于是用的relative定位，这个地方是布局的核心部分，否则无法将标题和图片序号放在图片之上。
title_bg 这个类及对应的div主要是为了实现标题的背景色透明，因为直接在标题上设置背景色透明，会造成文字也是有透明度的。
附上demo地址：轮播演示原理demo
