jQuery插件之路(一)——試着給jQuery的一個Carousel插件添加新的功能

前幾日在網上看到了一個關於Carousel插件的教學視頻，因而也順便跟着學習着作了一下。可是在作完以後發現，在別的網站上面看到相似的效果要比如今作的這個要多一個功能，也就是在底下會有一些按鈕，當鼠標放上去或者點擊以後，Carousel就會吧跟這個按鈕相同下標的li做爲第一幀顯示。既然如今這個沒有了這個功能，那麼何不本身作一個呢？(本人也是第一個次寫插件，有很差的地方萬望指出)，全部的代碼都在這裏https://github.com/wwervin72/jQuery。

那麼說幹就幹，首先咱們要作的就是要把這些按鈕顯示出來。因而咱們就須要在Carousel的原型對象prototype上添加一個方法，用於生成切換幻燈片的按鈕。

switchSlideBtn : function(){
            var slideNum = this.posterItems.size();   //得到當前的這個carousel對象的總共的幀數
            var str = '';  
            var firstBtnLeft = (this.setting.width-(slideNum-1)*15-slideNum*15)/2;  //規定第一個按鈕放的位置
            for(var i = 0; i<slideNum; i++){
                str += '<button class="btn"></button>';  //把每個btn的代碼添加到str字符串中，而後一次性添加到selBtn這裏面，避免屢次修改DOM
            }
            $('#selBtn').html(str);    
            for(var i = 0;i<slideNum; i++){
                $('#selBtn .btn').eq(i).css('left' , firstBtnLeft+i*30); 
            }        
},

而後咱們須要在Carousel這個構造函數裏面運行這個方法

this.switchSlideBtn();

那麼到了這裏，咱們的選擇按鈕就已經添加好了。如今要作的就是給這每個按鈕添加一個鼠標放上去的事件。

$('#selBtn .btn').each(function(){
            $(this).hover(function(){
                if(self.rotateFlag){
                    self.switchSlide(this);
                }
            },function(){
            });
 })

而後咱們也須要再給Carousel的原型對象添加一個切換幻燈片的方法，由於在HTML代碼中咱們用的li而後裏面放的是a、Img標籤，因此下面的Li也就是Carousel的每一幀。

//用切換幻燈片的按鈕切換幻燈片的方法
        switchSlide : function(btn){
            var self = this;
            var BtnIndex = $(btn).index();  //得到當前是哪個按鈕執行事件
            $('#selBtn .btn').css('background','rgba(255,255,255,.3)');
            $('#selBtn .btn').eq(BtnIndex).css('background','rgba(255,255,255,1)');
            var level = Math.floor(this.posterItems.size()/2),
            posterItemsLength = this.posterItems.size(),
            index;
            $('.poster-item').filter(function(i,item){
                if($(this).css('z-index') == level){  //得到當前顯示的第一幀的下標
                    index = i;
                }
            });
            var nextTime = BtnIndex-index;  //向左旋轉nextTime次
            var arr = [],zIndexArr=[];
            for(var i = 0;i < posterItemsLength;i++){   
                arr.push(i);  
            }
            arr = arr.concat(arr);  //添加一個數組，用來模擬Li的下標
            if(nextTime > 0){   //prev 左旋轉,把數組的後半部分向前移動nextTime個下標
                self.rotateFlag = false;  //注意這裏吧self.rotateFlag這個標識放在裏面來修改了。
                this.posterItems.each(function(i, item){
                    var posterItemIndex = arr.lastIndexOf(i);  //得到li節點在arr中對應的下標
                    var tag = $(self.posterItems[arr[posterItemIndex-nextTime]]),
                    width = tag.width(),
                    height = tag.height(),
                    zIndex = tag.css('zIndex'),
                    opacity = tag.css('opacity'),
                    left = tag.css('left'),
                    top = tag.css('top');
                    zIndexArr.push(zIndex);
                    $(item).animate({
                        width : width,
                        height : height,
                        opacity : opacity,
                        left : left,
                        top : top
                    },self.setting.speed,function(){
                        self.rotateFlag = true;   //在每個幀的動畫都執行完畢以後，self.rotateFlag改成true，才能執行下一次動畫
                    });
                });
                self.posterItems.each(function(i){
                    $(this).css('zIndex',zIndexArr[i]);  //把這個z-index提出來單獨改變是爲了讓z-index這個屬性的改變最早執行，而且不須要動畫
                });
            }

            if(nextTime < 0){  //next 右旋轉,把數組的前半部分向後移動nextTime的絕對值個下標
                self.rotateFlag = false;
                this.posterItems.each(function(i, item){
                    var posterItemIndex = arr.indexOf(i),  //得到li節點在arr中對應的下標
                    tag = $(self.posterItems[arr[posterItemIndex+Math.abs(nextTime)]]),
                    width = tag.width(),
                    height = tag.height(),
                    zIndex = tag.css('zIndex'),
                    opacity = tag.css('opacity'),
                    left = tag.css('left'),
                    top = tag.css('top');
                    zIndexArr.push(zIndex);
                        $(item).animate({
                        width : width,
                        height : height,
                        opacity : opacity,
                        left : left,
                        top : top
                    },self.setting.speed,function(){
                        self.rotateFlag = true;    
                    });
                });
                self.posterItems.each(function(i){
                    $(this).css('zIndex',zIndexArr[i]);
                });
            }
        },

在這裏主要遇到了兩個問題：

一、如何來得到Carousel中的每一幀在移動以後的下標，而後再把相應下標的屬性，添加到相應幀上。

          我這裏根據li的長度，來建立一個元素爲0-li.length-1的數組，而且再concat自己一次，用裏面的元素來標識每一幀移動事後的下標，若是是Carousel須要向左旋轉，也就是按鈕的下標大於當前的第一幀的下標，那麼咱們就須要吧這個數組的後半部分做爲每一幀的下標，而且向左移動(按鈕下標-當前第一幀下標)個位置，而後這個位置的元素就是每一幀的在旋轉事後的下標。若果是向右旋轉也是相似。不過就須要把數組的前半部分，前後移動了。

二、當咱們用鼠標在按鈕上飛速的移動的時候就會出現一些BUG，這是由於再上一個動畫還沒執行完畢，下一個事件又被觸發了。

          那麼這裏咱們就須要用一個標識來限制事件的執行，也就是這裏的self.rotateFlag。可是在我通過屢次的測試以後，發現吧這個標識賦值爲false的語句不能放在旋轉的方法前面，這樣也會出現問題，當咱們把它放置在方法裏面的if條件語句的開頭的時候，基本上就沒什麼問題了。

好了到了這裏Carousel擴展的功能就介紹完了。其餘的部分就不作介紹了，有興趣的朋友能夠去上面我給出的地址download下來看看。