jQuery 如何為Carousel外掛程式新增新的功能_jquery

本文是小編自己寫的一個為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();

那麼到了這裡，我們的選擇按鈕就已經添加好了。現在要做的就是給這每一個按鈕加上一個滑鼠放上去的事件。

$('#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下來看看。同時也非常感謝大家對腳本之家網站的支持！