jQuery 如何給Carousel插件添加新的功能
本文是小編自己寫的一個給carousel插件添加新功能,關(guān)于Carousel插件的教學(xué)視頻。參考別的網(wǎng)站,當(dāng)鼠標(biāo)放在下排按鈕上或者點擊之后,Carousel就會跟這個按鈕相同下標(biāo)的li作為第一幀顯示。
所有的代碼都在這里https://github.com/wwervin72/jQuery-Carousel
那么說干就干,首先我們要做的就是要把這些按鈕顯示出來。于是我們就需要在Carousel的原型對象prototype上添加一個方法,用于生成切換幻燈片的按鈕。
switchSlideBtn : function(){ var slideNum = this.posterItems.size(); //獲得當(dāng)前的這個carousel對象的總共的幀數(shù) var str = ''; var firstBtnLeft = (this.setting.width-(slideNum-1)*15-slideNum*15)/2; //規(guī)定第一個按鈕放的位置 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這個構(gòu)造函數(shù)里面運行這個方法
this.switchSlideBtn();
那么到了這里,我們的選擇按鈕就已經(jīng)添加好了?,F(xiàn)在要做的就是給這每一個按鈕添加一個鼠標(biāo)放上去的事件。
$('#selBtn .btn').each(function(){ $(this).hover(function(){ if(self.rotateFlag){ self.switchSlide(this); } },function(){ }); })
然后我們也需要再給Carousel的原型對象添加一個切換幻燈片的方法,因為在HTML代碼中我們用的li然后里面放的是a、Img標(biāo)簽,所以下面的Li也就是Carousel的每一幀。
//用切換幻燈片的按鈕切換幻燈片的方法 switchSlide : function(btn){ var self = this; var BtnIndex = $(btn).index(); //獲得當(dāng)前是哪一個按鈕執(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); //添加一個數(shù)組,用來模擬Li的下標(biāo) if(nextTime > 0){ //prev 左旋轉(zhuǎn),把數(shù)組的后半部分向前移動nextTime個下標(biāo) self.rotateFlag = false; //注意這里吧self.rotateFlag這個標(biāo)識放在里面來修改了。 this.posterItems.each(function(i, item){ var posterItemIndex = arr.lastIndexOf(i); //獲得li節(jié)點在arr中對應(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; //在每一個幀的動畫都執(zhí)行完畢之后,self.rotateFlag改為true,才能執(zhí)行下一次動畫 }); }); self.posterItems.each(function(i){ $(this).css('zIndex',zIndexArr[i]); //把這個z-index提出來單獨改變是為了讓z-index這個屬性的改變最先執(zhí)行,并且不需要動畫 }); } if(nextTime < 0){ //next 右旋轉(zhuǎn),把數(shù)組的前半部分向后移動nextTime的絕對值個下標(biāo) self.rotateFlag = false; this.posterItems.each(function(i, item){ var posterItemIndex = arr.indexOf(i), //獲得li節(jié)點在arr中對應(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]); }); } },
在這里主要遇到了兩個問題:
1、如何來獲得Carousel中的每一幀在移動之后的下標(biāo),然后再把相應(yīng)下標(biāo)的屬性,添加到相應(yīng)幀上。
我這里根據(jù)li的長度,來創(chuàng)建一個元素為0-li.length-1的數(shù)組,并且再concat本身一次,用里面的元素來標(biāo)識每一幀移動過后的下標(biāo),如果是Carousel需要向左旋轉(zhuǎn),也就是按鈕的下標(biāo)大于當(dāng)前的第一幀的下標(biāo),那么我們就需要吧這個數(shù)組的后半部分作為每一幀的下標(biāo),并且向左移動(按鈕下標(biāo)-當(dāng)前第一幀下標(biāo))個位置,然后這個位置的元素就是每一幀的在旋轉(zhuǎn)過后的下標(biāo)。若果是向右旋轉(zhuǎn)也是類似。不過就需要把數(shù)組的前半部分,先后移動了。
2、當(dāng)我們用鼠標(biāo)在按鈕上飛速的移動的時候就會出現(xiàn)一些BUG,這是因為再上一個動畫還沒執(zhí)行完畢,下一個事件又被觸發(fā)了。
那么這里我們就需要用一個標(biāo)識來限制事件的執(zhí)行,也就是這里的self.rotateFlag。但是在我經(jīng)過多次的測試之后,發(fā)現(xiàn)吧這個標(biāo)識賦值為false的語句不能放在旋轉(zhuǎn)的方法前面,這樣也會出現(xiàn)問題,當(dāng)我們把它放置在方法里面的if條件語句的開頭的時候,基本上就沒什么問題了。
好了到了這里Carousel擴展的功能就介紹完了。其他的部分就不做介紹了,有興趣的朋友可以去上面我給出的地址download下來看看。同時也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
簡單實現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
這篇文章主要教大家如何簡單實現(xiàn)jQuery上傳圖片顯示預(yù)覽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08基于jquery實現(xiàn)表格內(nèi)容篩選功能實例解析
對于表格來說,當(dāng)數(shù)據(jù)比較多的時候,我們無法一頁一頁的查找,這樣我們就可以進行篩選操作,這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)表格內(nèi)容篩選功能的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05文本框輸入時 實現(xiàn)自動提示(像百度、google一樣)
文本框輸入時 實現(xiàn)自動提示(像百度、google一樣),需要的朋友可以參考下2012-04-04jquery+ajax實現(xiàn)省市區(qū)三級聯(lián)動(封裝和不封裝兩種方式)
這篇文章主要為大家詳細(xì)介紹了jquery+ajax實現(xiàn)省市區(qū)三級聯(lián)動的相關(guān)代碼,包括封裝和不封裝兩種方式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05使用jQuery中的when實現(xiàn)多個AJAX請求對應(yīng)單個回調(diào)的例子分享
我在為 Mozilla Developer Network(Mozilla開發(fā)者社區(qū)) 寫代碼時需要加載的一個普通的的腳本文件,以及一個JSON流。 因為我們使用jQuery,這意味著需要調(diào)用 jQuery.getScript 和 jQuery.getJSON 函數(shù)2014-04-04