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

复制代码 代码如下:

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

}

打包下载地址