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

利用面向對象自己動手寫了一個封裝好的jquery輪播組件，可滿足一般需求，不僅使用簡單且復用性高。

demo:點此預覽 代碼地址：https://github.com/zsqosos/component_library/tree/master/jquery-carousel

具體代碼如下：

HTML：

    <div class="banner" id="J_bg_ban">
　　<ul>
　　　　<li><a href="#"><img src="./img/banner_01.jpg" alt="廣告圖"/></a></li>
　　　　<li><a href="#"><img src="./img/banner_02.jpg" alt="廣告圖"/></a></li>
　　　　<li><a href="#"><img src="./img/banner_03.jpg" alt="廣告圖"/></a></li>
　　　　<li><a href="#"><img src="./img/banner_04.jpg" alt="廣告圖"/></a></li>
　　　　<li><a href="#"><img src="./img/banner_05.jpg" alt="廣告圖"/></a></li>
　　</ul>
　　<div class="indicator" id="J_bg_indicator">
　　</div>
　　<div class="ban-btn clearfloat" id="J_bg_btn">
　　　　<a class="next-btn fr" href="javascript:">&gt;</a><a class="prev-btn fl" href="javascript:">&lt;</a>
　　</div>

 css：

.banner {
    height: 325px;
    width: 812px;
    position: relative;
    overflow: hidden;
}
.banner ul{
    padding: 0;
    margin: 0;
}
.banner ul li{
    top: 0;
    left: 0;
    list-style: none;
    position: absolute;
}
.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;
    text-decoration: none;
}
.next-btn{
    float: right;
}
.prev-btn{
    float: left;
}
.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;
}

 

js：

$.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("indicator-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('indicator-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(){
　　$.carousel.startPlay('#J_bg_ban','#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對象作為一個構造函數或原型對象，每次需要使用時在進行實例化操作，這樣可滿足多個輪播件同時使用的需求，同時做到最大化的函數復用。我會在后續的文章中解決這個問題，歡迎關注或提出指導。