jQuery パッケージに基づいた自動切り替え機能を備えたフェードインおよびフェードアウト スライドショー プラグイン download_jquery

思考というのはとても不思議なもので、一度行き詰まりに陥ってしまうと、しばらく冷静になり、古い考え方を完全に脇に置くことによってのみ、新しい出口を見つけることができるのです。使いやすさを考慮して、プラグインとしてパッケージ化されています。

1. パラメーターを高度にカスタマイズできます。
3. プラグイン ファイルは小さく、圧縮後のサイズは 1.04k、開発バージョンは 3.29k です。


。
ここをクリックしてデモを表示します

ここをクリックしてプラグインをダウンロードします

使用手順
1. jQuery を導入します。ライブラリ ファイルと jQuery.iFadeSlide.pack.js プラグイン ファイル (ページに他の js ファイルがある場合は、それらをマージできます) http リクエストを減らすために、場所のカスタマイズを導入します。 🎜>コードをコピーします

コードは次のとおりです:

スタイル ファイルをインポートする必要はありません。デモの構造を使用する場合は、スタイルをプロジェクト ページに直接マージすることができます。2.スイッチング要素のパラメータを渡します。空の場合、またはパラメータを渡さない場合、プラグインのデフォルトのパラメータに従って実行されます。たとえば、次のコードは 3 セットのスライド切り替え呼び出しです。デモデモ内:

コードをコピー


コードは次のとおりです:

$(function( ){
//SAMPLE -A 呼び出し --- パラメーターは渡されません。デフォルトのパラメーターは

$('div#slide').iFadeSlide() と呼ばれます。 //SAMPLE-B 呼び出し--- 新しいパラメータが渡されます。$('div#slide_b').iFadeSlide({ フィールド: $('div#slide_b a '), icocon:$(' div.ico_b'), hoverCls: 'high_b', curIndex: 2, //インデックス値は 0 から始まるため、ここでは 3 番目の項目が強調表示されます

interval: 2000

}) ;
//SAMPLE-C 呼び出し---新しいパラメータを渡すと、元のパラメータが上書きされます。渡されない場合は、デフォルト値が使用されます。
$(' div#slide_c').iFadeSlide({
フィールド: $('div#slide_c img'),
アイコン: $('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 = '

';
var ico = iset.icocon.find('li'); //インデックスリスト Set
var size = iset.field.size(); //スイッチ要素量
var Index = 0; //初期インデックス値
var clearFun=null;フェードアウトとフェードイン function
var fadeFun = function(obj){
index = ico.index(obj); //現在のインデックス値を取得します
//現在表示されている要素をフェードアウトして要素を検索しますインデックス値をフェードインします
iset.field.filter(':visible').fadeOut(iset.outTime, function(){
iset.field.eq(index).fadeIn(iset.inTime) ;
});
// 現在のインデックスに強調表示スタイルを追加し、兄弟要素の強調表示スタイルを削除します
$(obj).addClass(iset.hoverCls).siblings().removeClass(iset) .hoverCls);
//関数
var changeFun = function(){
index;
if (index == size){index = 0 }; //インデックス値が等しい場合、要素数を切り替える場合は0に初期化されます
ico.eq(index).trigger('mouseleave') //マウス引き出しのイベントをシミュレートします現在のインデックスの要素領域
};
//自動切り替え Function
varscrollFun = function(){
clearFun = setInterval(function(){
changeFun()
}, iset.interval);
//自動切り替え関数を停止します
var stopFun = function(){
clearInterval(clearFun); ; //初期自動切り替え
//インデックス領域でマウスをスワイプして自動切り替えを停止し、要素を現在のインデックスに切り替えます。マウス ストロークによりインデックスが現在の値に初期化されます (そうしないと、マウス ストロークが混乱を引き起こします) )
ico.hover(function(){
stopFun();
fadeFun(this);
}, function(){
fadeFun(this);
})。 eq(iset.curIndex).mouseleave(); //強調表示されたインデックスの初期値
//スイッチ領域 マウスを内側に移動すると自動切り替えが停止し、マウスを外側に移動すると自動切り替えが継続されます。 field.hover(function(){
stopFun();
}, function(){
scrollFun();
}); })(jQuery);