基于jQuery的可用于选项卡及幻灯的切换插件

118 阅读 0 评论 78 点赞

我是靠谱客的博主威武高跟鞋，最近开发中收集的这篇文章主要介绍基于jQuery的可用于选项卡及幻灯的切换插件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

思路就不说了，记得以前写过一个自动切换的幻灯插件：，思路有部分是类似的。当然，本文中插件源码中也有注释~ 插件核心代码：点此查看演示

复制代码代码如下:

 
$.fn.WIT_SetTab=function(iSet){ 
/* 
* @Mr.Think 
* Nav: 导航钩子； 
* Field：切换区域 
* K:初始化索引； 
* CurCls：高亮样式； 
* Auto：是否自动切换； 
* AutoTime：自动切换时间； 
* OutTime：淡入时间； 
* InTime：淡出时间； 
* CrossTime：鼠标无意识划过时间 
* Ajax：是否开启ajax 
* AjaxFun：开启ajax后执行的函数 
*/ 
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; 
//切换函数 
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); 
} 
//初始高亮第一个 
changeFun(iSet.K); 
//鼠标事件 
iSet.Nav.hover(function(){ 
iSet.K=iSet.Nav.index(this); 
if(iSet.Auto){ 
clearInterval(autoSlide); 
} 
hasCls = $(this).hasClass(iSet.CurCls); 
//避免无意识划过时触发 
acrossFun=setTimeout(function(){ 
//避免当前高亮时划入再次触发 
if(!hasCls){ 
changeFun(iSet.K); 
} 
},iSet.CrossTime); 
},function(){ 
clearTimeout(acrossFun); 
//ajax调用 
if(iSet.Ajax){ 
iSet.AjaxFun(); 
} 
if(iSet.Auto){ 
//自动切换 
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'); 
} 