jQuery_jquery를 기반으로 하는 탭 및 슬라이드쇼용 전환 플러그인

이전에 자동 전환 슬라이드쇼 플러그인을 작성했던 기억이 납니다. 일부 아이디어는 비슷합니다. 물론, 이 글의 플러그인 소스코드에도 코멘트가 있습니다~ 플러그인 핵심코드: 데모를 보려면 여기를 클릭하세요

코드 복사 코드는 다음과 같습니다.

$.fn.WIT_SetTab=function(iSet){
/*
* @Mr .생각해 보세요
* Nav: 탐색 후크
* K: 초기화 인덱스
* CurCls: 강조 스타일;
* 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;
//전환 기능
functionchangeFun(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')
}



패키지 다운로드 주소