本文是小編自己寫的一個(gè)給carousel插件添加新功能，關(guān)于Carousel插件的教學(xué)視頻。參考別的網(wǎng)站，當(dāng)鼠標(biāo)放在下排按鈕上或者點(diǎn)擊之后，Carousel就會(huì)跟這個(gè)按鈕相同下標(biāo)的li作為第一幀顯示。

所有的代碼都在這里https://github.com/wwervin72/jQuery-Carousel

那么說干就干，首先我們要做的就是要把這些按鈕顯示出來。于是我們就需要在Carousel的原型對(duì)象prototype上添加一個(gè)方法，用于生成切換幻燈片的按鈕。

switchSlideBtn : function(){

var slideNum = this.posterItems.size(); //獲得當(dāng)前的這個(gè)carousel對(duì)象的總共的幀數(shù)

var str = '';

var firstBtnLeft = (this.setting.width-(slideNum-1)*15-slideNum*15)/2; //規(guī)定第一個(gè)按鈕放的位置

for(var i = 0; i<slideNum; i++){

str += '<button class="btn"></button>'; //把每一個(gè)btn的代碼添加到str字符串中，然后一次性添加到selBtn這里面，避免多次修改DOM

}

$('#selBtn').html(str);

for(var i = 0;i<slideNum; i++){

$('#selBtn .btn').eq(i).css('left' , firstBtnLeft+i*30);

}

},

然后我們需要在Carousel這個(gè)構(gòu)造函數(shù)里面運(yùn)行這個(gè)方法

this.switchSlideBtn();

那么到了這里，我們的選擇按鈕就已經(jīng)添加好了。現(xiàn)在要做的就是給這每一個(gè)按鈕添加一個(gè)鼠標(biāo)放上去的事件。

$('#selBtn .btn').each(function(){

$(this).hover(function(){

if(self.rotateFlag){

self.switchSlide(this);

}

},function(){

});

})

然后我們也需要再給Carousel的原型對(duì)象添加一個(gè)切換幻燈片的方法，因?yàn)樵贖TML代碼中我們用的li然后里面放的是a、Img標(biāo)簽，所以下面的Li也就是Carousel的每一幀。

//用切換幻燈片的按鈕切換幻燈片的方法

switchSlide : function(btn){

var self = this;

var BtnIndex = $(btn).index(); //獲得當(dāng)前是哪一個(gè)按鈕執(zhí)行事件

$('#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){ //獲得當(dāng)前顯示的第一幀的下標(biāo)

index = i;

}

});

var nextTime = BtnIndex-index; //向左旋轉(zhuǎn)nextTime次

var arr = [],zIndexArr=[];

for(var i = 0;i < posterItemsLength;i++){

arr.push(i);

}

arr = arr.concat(arr); //添加一個(gè)數(shù)組，用來模擬Li的下標(biāo)

if(nextTime > 0){ //prev 左旋轉(zhuǎn),把數(shù)組的后半部分向前移動(dòng)nextTime個(gè)下標(biāo)

self.rotateFlag = false; //注意這里吧self.rotateFlag這個(gè)標(biāo)識(shí)放在里面來修改了。

this.posterItems.each(function(i, item){

var posterItemIndex = arr.lastIndexOf(i); //獲得li節(jié)點(diǎn)在arr中對(duì)應(yīng)的下標(biāo)

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; //在每一個(gè)幀的動(dòng)畫都執(zhí)行完畢之后，self.rotateFlag改為true，才能執(zhí)行下一次動(dòng)畫

});

});

self.posterItems.each(function(i){

$(this).css('zIndex',zIndexArr[i]); //把這個(gè)z-index提出來單獨(dú)改變是為了讓z-index這個(gè)屬性的改變最先執(zhí)行，并且不需要?jiǎng)赢?/P>

});

}

if(nextTime < 0){ //next 右旋轉(zhuǎn),把數(shù)組的前半部分向后移動(dòng)nextTime的絕對(duì)值個(gè)下標(biāo)

self.rotateFlag = false;

this.posterItems.each(function(i, item){

var posterItemIndex = arr.indexOf(i), //獲得li節(jié)點(diǎn)在arr中對(duì)應(yīng)的下標(biāo)

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]);

});

}

},

在這里主要遇到了兩個(gè)問題：

1、如何來獲得Carousel中的每一幀在移動(dòng)之后的下標(biāo)，然后再把相應(yīng)下標(biāo)的屬性，添加到相應(yīng)幀上。

我這里根據(jù)li的長(zhǎng)度，來創(chuàng)建一個(gè)元素為0-li.length-1的數(shù)組，并且再concat本身一次，用里面的元素來標(biāo)識(shí)每一幀移動(dòng)過后的下標(biāo)，如果是Carousel需要向左旋轉(zhuǎn)，也就是按鈕的下標(biāo)大于當(dāng)前的第一幀的下標(biāo)，那么我們就需要吧這個(gè)數(shù)組的后半部分作為每一幀的下標(biāo)，并且向左移動(dòng)(按鈕下標(biāo)-當(dāng)前第一幀下標(biāo))個(gè)位置，然后這個(gè)位置的元素就是每一幀的在旋轉(zhuǎn)過后的下標(biāo)。若果是向右旋轉(zhuǎn)也是類似。不過就需要把數(shù)組的前半部分，先后移動(dòng)了。

2、當(dāng)我們用鼠標(biāo)在按鈕上飛速的移動(dòng)的時(shí)候就會(huì)出現(xiàn)一些BUG，這是因?yàn)樵偕弦粋€(gè)動(dòng)畫還沒執(zhí)行完畢，下一個(gè)事件又被觸發(fā)了。

那么這里我們就需要用一個(gè)標(biāo)識(shí)來限制事件的執(zhí)行，也就是這里的self.rotateFlag。但是在我經(jīng)過多次的測(cè)試之后，發(fā)現(xiàn)吧這個(gè)標(biāo)識(shí)賦值為false的語句不能放在旋轉(zhuǎn)的方法前面，這樣也會(huì)出現(xiàn)問題，當(dāng)我們把它放置在方法里面的if條件語句的開頭的時(shí)候，基本上就沒什么問題了。

好了到了這里Carousel擴(kuò)展的功能就介紹完了。其他的部分就不做介紹了，有興趣的朋友可以去上面我給出的地址download下來看看。