思路就不说了，记得以前写过一个自动切换的幻灯插件：，思路有部分是类似的。当然，本文中插件源码中也有注释~ 插件核心代码：点此查看演示
复制代码 代码如下:
$.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');
}
打包下载地址