以前要做圖片輪播效果的時候，總是在網(wǎng)上找一段jquery的復(fù)制粘貼進(jìn)去，只索取不奉獻(xiàn)，今個就把我對這個的實現(xiàn)原理講解一下。

首先說下，我在網(wǎng)上找的例子全是用的UL 實現(xiàn)，其實大可不必，只要是能包含img標(biāo)簽的HTML標(biāo)簽都可以做輪播效果。利用jquery的淡入淡出函數(shù)（fadeIn和fadeOut）。廢話也不多說，邊上代碼邊講解。最后附上demo效果地址。

先HTML布局:

  <!--整體容器--> <div class="imgbox"> <!--圖片列表，除第一張顯示外，其余隱藏--> <ul> <li style="display: block;" title="清靈少女宛如夢境仙女"><a href="#"> <img src="http://p.dddddd.net/uploads/allimg/110927/11-11092G32227.jpg" /></a></li> <li title="美女海邊性感透視裝誘惑"><a href="#"> <img src="http://tu.dushiys.com/uploads/allimg/130621/1-130621145931-50.jpg" /></a></li> <li title="夏小薇：百變小魔女變身性感數(shù)碼寶貝"><a href="#"> <img src="http://p.dddddd.net/uploads/allimg/130620/19-130620115013.jpg" /></a></li> <li title="夏小薇化身《殺破狼》粉色妖姬鮮嫩欲滴"><a href="#"> <img src="http://imgtu.5239.com/uploads/allimg/130315/5-130315135240.jpg" /></a></li> </ul> <div class="title_bg common"><!--圖片標(biāo)題背景--> </div> <!--圖片顯示標(biāo)題--> <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;
                } //先淡出，在回調(diào)函數(shù)中執(zhí)行下一張淡入 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"); //顯示標(biāo)題 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();
                }
            };
        };

輪播的腳本是個人的一點小習(xí)慣，一般不輕易向jquery中寫入擴(kuò)展函數(shù).諸位莫要在意。

通過以上的代碼，實現(xiàn)輪播的核心主要是對jquery的fadeIn和fadeOut函數(shù)的調(diào)用，另外考察的就是CSS布局的功力了。

在上面顯示圖片標(biāo)題的地方不能用絕對定位，于是用的relative定位，這個地方是布局的核心部分，否則無法將標(biāo)題和圖片序號放在圖片之上。

title_bg 這個類及對應(yīng)的div主要是為了實現(xiàn)標(biāo)題的背景色透明，因為直接在標(biāo)題上設(shè)置背景色透明，會造成文字也是有透明度的。