I won’t go into the idea. I remember I wrote an automatic switching slideshow plug-in before: , and some of the ideas are similar. Of course, there are also comments in the plug-in source code in this article ~ Plug-in core code: Click here to view the demo
$.fn.WIT_SetTab=function(iSet){
/*
* @Mr.Think
* Nav: Navigation hook;
* Field : Switch area
* K: Initialization index;
* CurCls: Highlight style;
* Auto: Whether to automatically switch;
* AutoTime: Automatic switching time;
* OutTime: Fade in time ;
* InTime: fade-out time;
* CrossTime: time when the mouse passes over unconsciously
* Ajax: whether to enable ajax
* AjaxFun: function executed after ajax is enabled
*/
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;
//Switch function
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);
}
//Initially highlight the first one
changeFun(iSet.K);
//Mouse events
iSet.Nav.hover(function(){
iSet.K=iSet.Nav.index(this);
if(iSet.Auto){
clearInterval(autoSlide );
}
hasCls = $(this).hasClass(iSet.CurCls);
//Avoid triggering when unintentional swiping
acrossFun=setTimeout(function(){
//Avoid Swiping in when currently highlighted triggers again
if(!hasCls){
changeFun(iSet.K);
}
},iSet.CrossTime);
},function(){
clearTimeout(acrossFun);
//ajax call
if(iSet.Ajax){
iSet.AjaxFun();
}
if(iSet.Auto){
//Automatic switching
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');
}
Package download address