jQuery_jqueryに基づくタブとスライドショーの切り替えプラグイン

このアイデアについては触れません。以前、自動切り替えスライドショー プラグインを作成したことを覚えています。いくつかのアイデアは似ています。もちろん、この記事のプラグイン ソース コードにはコメントもあります ~ プラグイン コア コード: デモを表示するにはここをクリックしてください

コードをコピーします コードは次のとおりです:

$.fn.WIT_SetTab=function(iSet){
/*
* @Mr .Think
* Nav: ナビゲーションフック;
* フィールド: スイッチエリア
* K: 初期化インデックス;
* 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).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')
}



パッケージのダウンロード アドレス