Home > Web Front-end > JS Tutorial > body text

Switching plug-in for tabs and slideshows based on jQuery_jquery

WBOY
Release: 2016-05-16 18:09:14
Original
985 people have browsed it

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

Copy the code The code is as follows:

$.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
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template