Heim > Web-Frontend > js-Tutorial > 基于jQuery的可用于选项卡及幻灯的切换插件_jquery

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

WBOY
Freigeben: 2016-05-16 18:09:14
Original
993 Leute haben es durchsucht

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

复制代码 代码如下:

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

打包下载地址
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage