注釈付きのフェードインおよびフェードアウト画像カルーセルプラグインの作成方法を段階的に説明します (1)

注釈付きのフェードインおよびフェードアウト画像カルーセルプラグインの作成方法を段階的に説明します (1)_JavaScript スキル

WBOY

リリース： 2016-05-16 18:18:55

オリジナル

1089 人が閲覧しました

数日前、blueIdea http://bbs.blueidea.com/thread-2911266-1-1.html でフェードインとフェードアウトの注釈付き画像カルーセル効果を見つけて、その作者のコードを見ました。効果は得られましたが、いくつか意見が異なります。

1. 作者のアイデアは、実際の画像リストを非表示にして、新しい div を作成し、現在の画像を継続的にプッシュすることです。画像をそのdivのinnerHTMLに追加してみましょう。このアイデアはやや新しいものではありますが、ターゲットエフェクトの操作ロジックの観点から見ると、リスト要素の z-index 値を変更することによる交互変換の方が、実際にはこのエフェクトロジックの本来の意図に沿っています。

2. 作成者はコードをある程度カプセル化しましたが、カプセル化はまだあまり良くなく、効果は 1 つだけであり、十分に設定することはできません。設定可能なプラグイン。

(追伸：上記の意見はあくまで事実に基づいたものであり、著者の技量に疑いの余地はありません。人によって意見は異なります。あくまで個人的な意見です。)

したがって、これも時間をかけて自分で書きました。同様の効果があり、ある程度カプセル化されていますが、軽量のネイティブプラグインとしかみなされませんが、それでも共有し、ステップバイステップのチュートリアルを提供します。、困っている友達に少しでも助けてあげたいと思っています。まずは最終的なレンダリングを見てみましょう:
注釈付きのフェードインおよびフェードアウト画像カルーセルプラグインの作成方法を段階的に説明します (1)_JavaScript スキル
さて、行きましょう!最初の部分を始めましょう!
最初の部分で達成したい目標は次のとおりです:
1. 変換ロジックを実装するための大規模なフレームワークを確立し、将来の機能拡張のための強固な基盤を築くための適切なコード構造を確立します。 (良いスタートは戦いの半分です!)
2. 最初の部分で達成される効果は、写真の自動切り替えです (この機能のみ)。
まず第一に、この効果を実現するには、初期化関数 init()-->init() を呼び出して、最初の画像から次の画像への変換を開始する必要があります。この関数を仮決定します関数は pos() --> 自動交互変換を実現するには、必ず自動変換関数が必要です function auto() --> auto() の自動変換には、前方向と前方向の 2 つの方向がある必要があります。暫定的に、move()-->move() で上向きまたは下向きの変換を指定して、変換関数 pos() に戻ることもできます。
そして、完全かつ実現可能な論理システムを確立しました。上記のロジックに基づいて、コード構造を使用して次のように表現します。

コードをコピーコードは次のとおりです。 🎜>

 var Honru={}; 
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 つのグローバル関数が事前定義されています 

コードをコピーコードは次のとおりです: 関数 H$(id){return document.getElementById(id)}

関数 H$$(c,p){return p.getElementsByTagName(c)}

 
誰もが理解していると思います。 
以下は各モジュール関数の逆アセンブリです: 

init module:

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

 
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) //変換関数 
}, 

 

auto:

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

auto:function(){ 
this.li.a = setInterval(new Function('Hongru.fader.move(1)) '),this.a*1000); 

 
移動: 

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

move:function(i){//パラメータ i には 2 つのオプションがあります (1 と -1) 、1 は次のものに実行することを意味し、-1 は前のものに実行することを意味します Zhang

var n = this.cur i; 
var m = i==1?n==this.l?0:n :nthis.pos(m);前または次の画像
}、

 
pos: 

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

pos:function(i){

clearInterval(this.li.a); 
this.li[i].style.zIndex = this.z; //次の画像の z-index を毎回 1 ずつ増やします
this.cur = i //現在表示されている画像の正しいシリアル番号をバインドします
this.auto(); //自動的に実行 
} 

 
OK、ソース コード全体は次のようになります: 

ステップ1
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>
</title>
<style type="text/css"></style>

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、それを実行するために更新する必要があります ]

さて、この部分は終わりです。終わりです。次の部分では、フェードインおよびフェードアウト効果と、クロージャによって引き起こされるメモリリークを回避するために先ほど述べた最適化計画を追加します。