jQuery圖片輪播（一）輪播實現並封裝

標籤：複用   anim   indicator   web   最大化   car   好的   關注   val   

利用物件導向自己動手寫了一個封裝好的jquery輪播對象，可滿足一般需求，需要使用時只需調用此對象的輪播方法即可。

demo：https://github.com/zsqosos/shopweb

具體代碼如下：

HTML結構：

 1 <div class="banner" id="J_bg_ban"> 2 　　<ul> 3 　　　　<li><a href="#"><img src="banner_04.jpg" alt="廣告圖 /></a></li> 4 　　　　<li><a href="#"><img src="banner_04.jpg" alt="廣告圖 /></a></li> 5 　　　　<li><a href="#"><img src="banner_03.jpg" alt="廣告圖"/></a></li> 6 　　　　<li><a href="#"><img src="banner_04.jpg" alt="廣告圖"/></a></li> 7 　　　　<li><a href="#"><img src="banner_05.jpg" alt="廣告圖"/></a></li> 8 　　</ul> 9 　　<div class="indicator" id="J_bg_indicator">10 　　</div>11 　　<div class="ban-btn clearfloat" id="J_bg_btn">12 　　　　<a class="next-btn fr" href="javascript:">&gt;</a><a class="prev-btn fl" href="javascript:">&lt;</a>13 　　</div>14 </div>

 

 css樣式：

.banner {    height: 325px;    width: 812px;    position: relative;    overflow: hidden;}.banner ul li{    position: absolute;
　　top: 0;
　　left: 0;}.banner ul li img{    height: 325px;    width: 812px;    display: block;}.ban-btn{    width: 100%;    position: absolute;    top: 136px;    z-index: 2;}.ban-btn a{    display: inline-block;    height: 60px;    width: 35px;    background: rgba(180,180,180,0.5);    font-size: 25px;    text-align: center;    line-height: 60px;    color: #fff;}.ban-btn a:hover{    background: rgba(100,100,100,0.5);}.indicator{    width: 100%;    position: absolute;    text-align: center;    bottom: 15px;    z-index: 2;}.indicator a{    display: inline-block;    width: 20px;    height: 5px;    margin:0 3px;    background: #fff;}.indicator-active{    background: #FF8C00!important;}

jquery代碼：

$.carousel = {    now : 0,                    //當前顯示的圖片索引    hasStarted : false,         //是否開始輪播    interval : null,            //定時器    liItems : null,             //要輪播的li元素集合    len : 0,                    //liItems的長度    aBox : null,                //包含指標的dom對象    bBox : null,                //包含前後按鈕的dom對象    /**     * 初始化及控制函數     * @param bannnerBox string 包含整個輪播圖盒子的id或class     * @param aBox  string 包含指標的盒子的id或class     * @param btnBox string 包含前後按鈕的盒子的id或class     */    startPlay : function(bannnerBox,aBox,btnBox) {        //初始化對象參數        var that = this;        this.liItems = $(bannnerBox).find(‘ul‘).find(‘li‘);        this.len = this.liItems.length;        this.aBox = $(bannnerBox).find(aBox);        this.bBox = $(bannnerBox).find(btnBox);        //讓第一張圖片顯示，根據輪播圖數量動態建立指標，並讓第一個指標處於啟用狀態，隱藏前後按鈕        this.liItems.first(‘li‘).css({‘opacity‘: 1, ‘z-index‘: 1}).siblings(‘li‘).css({‘opacity‘: 0, ‘z-index‘: 0});        var aDom = ‘‘;        for (var i = 0; i < this.len; i++){            aDom += ‘<a></a>‘;        }        $(aDom).appendTo(this.aBox);        this.aBox.find(‘a:first‘).addClass("imgnum-active");        this.bBox.hide();        //滑鼠移入banner圖時，停止輪播並顯示前後按鈕，移出時開始輪播並隱藏前後按鈕        $(bannnerBox).hover(function (){            that.stop();            that.bBox.fadeIn(200);        }, function (){            that.start();            that.bBox.fadeOut(200);        });        //滑鼠移入指標時，顯示對應圖片，移出時繼續播放        this.aBox.find(‘a‘).hover(function (){            that.stop();            var out = that.aBox.find(‘a‘).filter(‘.indicator-active‘).index();            that.now = $(this).index();            if(out!=that.now) {                that.play(out, that.now)            }        }, function (){            that.start();        });        //點擊左右按鈕時顯示上一張或下一張        $(btnBox).find(‘a:first‘).click(function(){that.next()});        $(btnBox).find(‘a:last‘).click(function(){that.prev()});        //開始輪播        this.start()    },    //前一張函數    prev : function (){        var out = this.now;        this.now = (--this.now + this.len) % this.len;        this.play(out, this.now);    },    //後一張函數    next : function (){        var out = this.now;        this.now = ++this.now % this.len;        this.play(out, this.now);    },    /**     * 播放函數     * @param out number 要消失的圖片的索引值     * @param now number 接下來要輪播的圖的索引值     */    play : function (out, now){        this.liItems.eq(out).stop().animate({opacity:0,‘z-index‘:0},500).end().eq(now).stop().animate({opacity:1,‘z-index‘:1},500);        this.aBox.find(‘a‘).removeClass(‘imgnum-active‘).eq(now).addClass(‘indicator-active‘);    },    //開始函數    start : function(){        if(!this.hasStarted) {            this.hasStarted = true;            var that = this;            this.interval = setInterval(function(){                that.next();            },2000);        }    },    //停止函數    stop : function (){        clearInterval(this.interval);        this.hasStarted = false;    }};

$(function(){
　　$.carsouel.startPlay(‘#J_bg_bn‘,‘#J_bg_indicator‘,‘#J_bg_btn‘);
})

 

最初實現時使用面向過程的方法來完成，雖然可以達到想要的效果，但代碼複用性不高，需要為頁面上每一個需要輪播的模組分別寫對應的函數。進行封裝後，不需要寫太多的代碼，使用時只需調用carsouel的startPlay方法並傳入三個參數即可，大大提高了易用性。

但是，當前代碼的缺陷也非常明顯，就是當一個頁面上同時有多個輪播件需要輪播時，只有最後一個會正常工作，這是由於carsouel對象只有一個，可以通過複製carsouel對象來解決這個問題，如：

    var banner1 = $.extend(true,{},carousel);    var banner2 = $.extend(true,{},carousel);    var banner3 = $.extend(true,{},carousel);    banner1.startPlay(‘#J_bg_ban1‘,‘#J_bg_indicator1‘,‘#J_bg_btn1‘);    banner2.startPlay(‘#J_bg_ban2‘,‘#J_sm_indicator2‘,‘#J_bg_btn2‘);    banner3.startPlay(‘#J_bg_ban3‘,‘#J_sm_indicator3‘,‘#J_bg_btn3‘);

 

這樣雖然可以滿足需求，但每次調用都會複製出一個新的對象，不僅影響效能，carsouel對象內的方法還不能夠重用，所以還需要進一步改進。

要想讓多個輪播件可以同時使用carsouel對象，並且可以複用carsouel對象內部的函數，必須將carsouel對象作為一個建構函式或原型對象，每次需要使用時在進行執行個體化操作，這樣可滿足多個輪播件同時使用的需求，同時做到最大化的函數複用。我會在後續的文章中解決這個問題，歡迎關注或提出指導。

jQuery圖片輪播（一）輪播實現並封裝