jQuery_jqueryに基づいた自動切り替えを備えたフェードインおよびフェードアウトスライドショープラグイン

実際には、これは単なるスライド ショー エフェクトです。 プラグイン機能 1. 高度にカスタマイズされたパラメータを呼び出すことができます。 3 。プラグイン ファイルは小さく、圧縮後のサイズは 1.04k ですが、開発バージョンは

デモとダウンロード です。メソッド 1. jQuery ライブラリ ファイルと jQuery.iFadeSlide を導入します。pack.js プラグイン ファイル (ページに他の js ファイルがある場合は、http リクエストを減らすためにそれをマージできます)。 >

コードをコピー コードは次のとおりです: &lt ;/script>

DEMO の構造を使用する場合は、スタイル ファイルをインポートする必要はありません。スタイルをカスタマイズすることをお勧めします。 2. ページ上でプラグインを呼び出し、スイッチング要素のパラメータを渡します。パラメータが空である場合、またはパラメータが渡されない場合は、次のようなパラメータが使用されます。コードは、デモ デモの 3 セットのスライド切り替え呼び出しです:

コードをコピーします コードは次のとおりです: $(function(){ //SAMPLE-A 呼び出し --- パラメーターは渡されません。デフォルトのパラメーターは $('div#slide').iFadeSlide() と呼ばれます。 ; //SAMPLE-B 呼び出し---新しいパラメータを渡すと、元のパラメータが上書きされます。 $('div#slide_b').iFadeSlide({ field: $ ('div#slide_b a'), icocon:$('div.ico_b'), hoverCls: 'high_b', curIndex: 2, //インデックス値が始まります0 からなので、ここで設定されます。 3 番目の項目を強調表示します。 interval: 2000 }) //SAMPLE-C 呼び出し --- 新しいパラメーターを渡すと、元のパラメーターとデフォルト値が上書きされます。 $('div#slide_c').iFadeSlide({ field: $('div#slide_c img'), icocon: $('div.ico_c') で渡されない場合に使用されます。 , outTime:100, inTime: 200 }) });

プラグイン呼び出し部分はプラグインの後に配置する必要があることに注意してください。ファイルリファレンス内 コアコード

コードをコピー コードは次のとおりです: ;(function($){ $.fn.extend({ iFadeSlide: function(options){ //プラグインパラメータの初期化 var iset={ field:$('div#slide img'), //要素コレクションを切り替えます icocon:$('div.ico'), //インデックスコンテナ hoverCls:'high', //切り替え現在のインデックス強調表示スタイル curIndex:0, //0 から始まるデフォルトの強調表示されたインデックス値 outTime:200, //要素のフェードアウト時間 (ミリ秒) inTime:300, //要素のフェード-in time (ms) interval:3000 //要素切り替え間隔 (ms) options=options || $.extend(iset,options) ;パラメータ オブジェクトをマージします。オプションに新しい値がある場合は、iset の対応する値を上書きします。それ以外の場合は、デフォルト値を使用します。 //スイッチング要素の量に基づいて、対応するインデックス値リストを生成し、それをスイッチングに挿入します。 area var ulcon = " "; iset.field.each(function(i){ ulcon = ulcon ' ' (i 1) ' '; }); ulcon = ' ';

/ /インデックス領域でマウスをスワイプして自動切り替えを停止し、要素を現在のインデックスに切り替えます。インデックスを現在の値に初期化します。そうしないと、マウスを引き出したときに切り替えが混乱します) ico.hover(function(){ stopFun() ; fadeFun(this); }, function(){ fadeFun(this); }).eq(iset.curIndex).mouseleave(); //最初に強調表示されたインデックス値

//マウスが移動すると、切り替え領域が自動切り替えを停止します。 iset.field.hover(function(){ stopFun(); }, function( ){ scrollFun(); }); >} }); })(jQuery);

その他 このプラグインはいかなる形式の商用利用も含めて無料で使用できますが、ご遠慮ください。 ご質問やご提案をお待ちしております。

テスト ファイル パッケージのダウンロード http://xiazai.jb51.net/201008 /yuanma/jQuery_iFadeSlide.rar