基于jQuery的可用于選項(xiàng)卡及幻燈的切換插件

更新時(shí)間：2011年03月28日 19:54:51 作者：

最近公司項(xiàng)目頁(yè)面中用到選項(xiàng)卡與幻燈比較多，特地寫(xiě)了個(gè)集選項(xiàng)卡、幻燈片與播放控制于一體的插件，同頁(yè)面可多次使用。

思路就不說(shuō)了，記得以前寫(xiě)過(guò)一個(gè)自動(dòng)切換的幻燈插件：，思路有部分是類(lèi)似的。當(dāng)然，本文中插件源碼中也有注釋~ 插件核心代碼：點(diǎn)此查看演示

 
$.fn.WIT_SetTab=function(iSet){ 
/* 
* @Mr.Think 
* Nav: 導(dǎo)航鉤子； 
* Field：切換區(qū)域 
* K:初始化索引； 
* CurCls：高亮樣式； 
* Auto：是否自動(dòng)切換； 
* AutoTime：自動(dòng)切換時(shí)間； 
* OutTime：淡入時(shí)間； 
* InTime：淡出時(shí)間； 
* CrossTime：鼠標(biāo)無(wú)意識(shí)劃過(guò)時(shí)間 
* Ajax：是否開(kāi)啟ajax 
* AjaxFun：開(kāi)啟ajax后執(zhí)行的函數(shù) 
*/ 
iSet=$.extend({Nav:null,Field:null,K:0,CurCls:'cur',Auto:false,AutoTime:4000,OutTime:100,InTime:150,CrossTime:60},iSet||{}); 
var acrossFun=null,hasCls=false,autoSlide=null; 
//切換函數(shù) 
function changeFun(n){ 
iSet.Field.filter(':visible').fadeOut(iSet.OutTime, function(){ 
iSet.Field.eq(n).fadeIn(iSet.InTime).siblings().hide(); 
}); 
iSet.Nav.eq(n).addClass(iSet.CurCls).siblings().removeClass(iSet.CurCls); 
} 
//初始高亮第一個(gè) 
changeFun(iSet.K); 
//鼠標(biāo)事件 
iSet.Nav.hover(function(){ 
iSet.K=iSet.Nav.index(this); 
if(iSet.Auto){ 
clearInterval(autoSlide); 
} 
hasCls = $(this).hasClass(iSet.CurCls); 
//避免無(wú)意識(shí)劃過(guò)時(shí)觸發(fā) 
acrossFun=setTimeout(function(){ 
//避免當(dāng)前高亮?xí)r劃入再次觸發(fā) 
if(!hasCls){ 
changeFun(iSet.K); 
} 
},iSet.CrossTime); 
},function(){ 
clearTimeout(acrossFun); 
//ajax調(diào)用 
if(iSet.Ajax){ 
iSet.AjaxFun(); 
} 
if(iSet.Auto){ 
//自動(dòng)切換 
autoSlide = setInterval(function(){ 
iSet.K++; 
changeFun(iSet.K); 
if (iSet.K == iSet.Field.size()) { 
changeFun(0); 
iSet.K=0; 
} 
}, iSet.AutoTime) 
} 
}).eq(0).trigger('mouseleave'); 
} 

打包下載地址

您可能感興趣的文章:

相關(guān)文章

jquery分頁(yè)插件jpaginate在IE中不兼容問(wèn)題
這篇文章主要介紹了jquery分頁(yè)插件jpaginate不兼容ie的問(wèn)題,需要的朋友可以參考下
2014-04-04
詳解jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù)
AJAX 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。下面通過(guò)本文給大家分享jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù)，需要的的朋友參考下
2017-07-07
jquery 批量上傳圖片實(shí)現(xiàn)代碼
在網(wǎng)上一直找不到j(luò)query上傳圖片的例子,今天由于工作需要,在網(wǎng)上找了很長(zhǎng)時(shí)間,找到了一個(gè)不太完整的例子,自已又對(duì)其進(jìn)行了修改,現(xiàn)在已經(jīng)可以使用,但只限于IE,火狐下不能使用,因?yàn)榛鸷碌貌坏奖镜厣蟼鞯膱D片路徑,希望能對(duì)新手有所幫助.
2010-01-01
JQuery實(shí)現(xiàn)動(dòng)態(tài)適時(shí)改變字體顏色的方法
這篇文章主要介紹了JQuery實(shí)現(xiàn)動(dòng)態(tài)適時(shí)改變字體顏色的方法,實(shí)例分析了jQuery操作鼠標(biāo)事件及顏色的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
jquery對(duì)table做排序操作的實(shí)例演示
這篇文章主要介紹了jquery對(duì)table做排序操作的實(shí)例演示,通過(guò)添加自定義屬性data-sort-field-ftime及表頭添加onchange事件詳細(xì)講解了操作過(guò)程,需要的朋友可以參考下
2017-08-08
jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的觸摸事件與虛擬鼠標(biāo)事件簡(jiǎn)介
這篇文章主要介紹了jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的觸摸事件與虛擬鼠標(biāo)事件的簡(jiǎn)單編寫(xiě)方法,jQuery是當(dāng)今人氣最高的Javascript庫(kù)并被廣泛應(yīng)用于移動(dòng)web的開(kāi)發(fā),需要的朋友可以參考下
2015-12-12
使用jquery實(shí)現(xiàn)的一個(gè)圖片延遲加載插件（含圖片延遲加載原理）
這篇文章主要介紹了使用jquery實(shí)現(xiàn)的一個(gè)圖片延遲加載插件,同時(shí)講解了圖片延遲加載的原理,還有無(wú)阻塞加載廣告的功能哦,需要的朋友可以參考下
2014-06-06
jQuery利用cookie 實(shí)現(xiàn)本地收藏功能(不重復(fù)無(wú)需多次命名)
cookie 是存儲(chǔ)于訪問(wèn)者計(jì)算機(jī)中的變量。這篇文章主要介紹了jQuery利用cookie 實(shí)現(xiàn)本地收藏功能不重復(fù)無(wú)需多次命名,需要的朋友可以參考下
2019-11-11
jQuery ajax中使用confirm,確認(rèn)是否刪除的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery ajax 中使用confirm ,確認(rèn)是否刪除的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
如何使用jquery動(dòng)態(tài)加載js,css文件實(shí)現(xiàn)代碼
在jquery中要實(shí)現(xiàn)動(dòng)態(tài)加載js文件的方法有很多種,最簡(jiǎn)單的我們可以直接利用$.include()方法來(lái)實(shí)現(xiàn)，感興趣的朋友可以參考下哈
2013-04-04