本文是小編自己寫的一個給carousel插件添加新功能，關于Carousel插件的教學視頻。參考別的網站，當鼠標放在下排按鈕上或者點擊之后，Carousel就會跟這個按鈕相同下標的li作為第一幀顯示。
所有的代碼都在這里https://github.com/wwervin72/jQuery-Carousel
那么說干就干，首先我們要做的就是要把這些按鈕顯示出來。于是我們就需要在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();
那么到了這里，我們的選擇按鈕就已經添加好了?，F在要做的就是給這每一個按鈕添加一個鼠標放上去的事件。
$('#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]);});}},在這里主要遇到了兩個問題：
1、如何來獲得Carousel中的每一幀在移動之后的下標，然后再把相應下標的屬性，添加到相應幀上。
我這里根據li的長度，來創建一個元素為0-li.length-1的數組，并且再concat本身一次，用里面的元素來標識每一幀移動過后的下標，如果是Carousel需要向左旋轉，也就是按鈕的下標大于當前的第一幀的下標，那么我們就需要吧這個數組的后半部分作為每一幀的下標，并且向左移動(按鈕下標-當前第一幀下標)個位置，然后這個位置的元素就是每一幀的在旋轉過后的下標。若果是向右旋轉也是類似。不過就需要把數組的前半部分，先后移動了。
2、當我們用鼠標在按鈕上飛速的移動的時候就會出現一些BUG，這是因為再上一個動畫還沒執行完畢，下一個事件又被觸發了。
那么這里我們就需要用一個標識來限制事件的執行，也就是這里的self.rotateFlag。但是在我經過多次的測試之后，發現吧這個標識賦值為false的語句不能放在旋轉的方法前面，這樣也會出現問題，當我們把它放置在方法里面的if條件語句的開頭的時候，基本上就沒什么問題了。
好了到了這里Carousel擴展的功能就介紹完了。其他的部分就不做介紹了，有興趣的朋友可以去上面我給出的地址download下來看看。同時也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
