ホームページ > 記事 > ウェブフロントエンド > 注釈付きのフェードインおよびフェードアウト画像カルーセル プラグインの作成方法を段階的に説明します (1)_JavaScript スキル
注釈付きのフェードインおよびフェードアウト画像カルーセル プラグインの作成方法を段階的に説明します (1)_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 18:18:551119ブラウズ
数日前、blueIdea http://bbs.blueidea.com/thread-2911266-1-1.html でフェードインとフェードアウトの注釈付き画像カルーセル効果を見つけて、その作者のコードを見ました。効果は得られましたが、いくつか意見が異なります。
1. 作者のアイデアは、実際の画像リストを非表示にして、新しい div を作成し、現在の画像を継続的にプッシュすることです。画像をそのdivのinnerHTMLに追加してみましょう。このアイデアはやや新しいものではありますが、ターゲット エフェクトの操作ロジックの観点から見ると、リスト要素の z-index 値を変更することによる交互変換の方が、実際にはこのエフェクト ロジックの本来の意図に沿っています。
2. 作成者はコードをある程度カプセル化しましたが、カプセル化はまだあまり良くなく、効果は 1 つだけであり、十分に設定することはできません。設定可能なプラグイン。
(追伸：上記の意見はあくまで事実に基づいたものであり、著者の技量に疑いの余地はありません。人によって意見は異なります。あくまで個人的な意見です。)
したがって、これも時間をかけて自分で書きました。同様の効果があり、ある程度カプセル化されていますが、軽量のネイティブ プラグインとしかみなされませんが、それでも共有し、ステップバイステップのチュートリアルを提供します。 、困っている友達に少しでも助けてあげたいと思っています。まずは最終的なレンダリングを見てみましょう: 
さて、行きましょう!最初の部分を始めましょう!
最初の部分で達成したい目標は次のとおりです:
1. 変換ロジックを実装するための大規模なフレームワークを確立し、将来の機能拡張のための強固な基盤を築くための適切なコード構造を確立します。 (良いスタートは戦いの半分です!)
2. 最初の部分で達成される効果は、写真の自動切り替えです (この機能のみ)。
まず第一に、この効果を実現するには、初期化関数 init()-->init() を呼び出して、最初の画像から次の画像への変換を開始する必要があります。この関数を仮決定します 関数は pos() --> 自動交互変換を実現するには、必ず自動変換関数が必要です function auto() --> auto() の自動変換には、前方向と前方向の 2 つの方向がある必要があります。暫定的に、move()-->move() で上向きまたは下向きの変換を指定して、変換関数 pos() に戻ることもできます。
そして、完全かつ実現可能な論理システムを確立しました。上記のロジックに基づいて、コード構造を使用して次のように表現します。
Hongru.fader = function(){
return{
init:function(options){ //オプションパラメータ: id (必須):画像リストの親タグ ID; auto (オプション): 自動実行時間; Index (オプション): 実行を開始したイメージのシリアル番号
this.pos(this.index); //変換関数
;
auto:function() {
setInterval(new Function('Hongru.fader.move(1)'), this.a*1000);
},
move:function(i); {//パラメータ i には 1 と -1 の 2 種類があり、1 は次の画像に移動することを意味し、-1 は前の画像に移動することを意味します
this.pos(m) // 前の画像に変換します。次の画像
},
pos:function(i){
this.auto() //自動的に実行
}
}
}(); >
上記は単なる私です。 良いコーディング習慣: すべての関数ブロックをクロージャ内に記述して、名前の競合を減らし、グローバル変数の汚染を避けます。 (ただし、これには問題があります。すべての関数がクロージャ内にあるため、IE のメモリ リークが発生する可能性があります。そのため、別のより良い方法があります。初期化関数のみをクロージャに書き込み、他の関数はプロトタイプを介して組み込まれます。これにより、また、名前の競合やグローバル変数の汚染を回避し、同時にメモリ負荷を軽減します。この最適化計画については次のセクションで説明します)
大きなフレームワークが完成したので、実際には半分成功したことになります。以下の手順に従って、各モジュールの特定の機能が強化されます。 DOM セレクターは最も一般的に使用される関数であるため、ここでは 2 つのグローバル関数が事前定義されています
誰もが理解していると思います。
以下は各モジュール関数の逆アセンブリです:
init:function(options){ //オプションパラメータ: id (必須): 画像リストの親タグ ID; auto (オプション): 自動実行時間; インデックス (オプション): 実行イメージのシリアルnumber
var wp = H$(options.id), // 画像リストの親要素を取得します
ul = H$$('ul',wp)[0], // Get
li = this.li = H$$('li',ul);
this.a = options.auto?options.auto:2; //自動実行間隔
this.index = options.position? options.position:0; // 実行を開始するピクチャのシリアル番号 (0 から始まります)
this.cur = this.z = 0;現在表示されている画像の番号&&z-index 変数
this.pos(this.index) //変換関数
},
this.li.a = setInterval(new Function('Hongru.fader.move(1)) '),this.a*1000);
移動:
var m = i==1?n==this.l?0:n :nthis.pos(m);前または次の画像
}、
pos:
this.li[i].style.zIndex = this.z; //次の画像の z-index を毎回 1 ずつ増やします
this.cur = i //現在表示されている画像の正しいシリアル番号をバインドします
this.auto(); //自動的に実行
}
OK、ソース コード全体は次のようになります:
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、それを実行するために更新する必要があります ]