ホームページ ウェブフロントエンド jsチュートリアル jQuery_jqueryに基づくタブとスライドショーの切り替えプラグイン

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

May 16, 2016 pm 06:09 PM
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')
}



パッケージのダウンロード アドレス
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?

jQueryで要素の高さ属性を削除するにはどうすればよいですか? jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する

徹底した分析: jQuery の長所と短所 徹底した分析: jQuery の長所と短所 Feb 27, 2024 pm 05:18 PM

徹底した分析: jQuery の長所と短所

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

jQuery を使用してすべての a タグのテキスト コンテンツを変更する

jQuery における eq の役割と応用シナリオを理解する jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery における eq の役割と応用シナリオを理解する

PHPでよく使われるファイル操作関数のまとめ PHPでよく使われるファイル操作関数のまとめ Apr 03, 2024 pm 02:52 PM

PHPでよく使われるファイル操作関数のまとめ

See all articles