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

最近公司项目页面中用到选项卡与幻灯比较多，特地写了个集选项卡、幻灯片与播放控制于一体的插件，同页面可多次使用。思路就不说了，记得以前写过一个自动切换的幻灯插件：http://mrthink.net/jq-plugin-ifadeslide/，思路有部分是类似的。当然，本文中插件源码中也有注释~ 插件核心代码：点此查看样例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

$.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'); }

原文发布于Mr.Think的博客：http://mrthink.net/jq-settab-slide/ 转载请注明