画像注釈を使用したフェードインおよびフェードアウトプラグインの作成方法を段階的に説明します (3)

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

WBOY

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

オリジナル

988 人が閲覧しました

実際、以前の適切なコード構造を使用すると、コントローラーを追加するのは非常に簡単です (^_^ 初期アーキテクチャのコード構造が非常に重要だと述べたのはこのためです!)
最初にアイデアについて話しましょうコントローラーの追加:
カルーセル要素の数に応じて、対応するコントロールボタンを各要素に追加します (ここでは a タグを直接使用して実行していますが、セマンティクスを考慮する場合は、ul または ol を使用できます) , 書き方の利便性を考慮して、最初にコントローラーの親タグを作成し、次に各コントロールボタンをコントローラーの親タグに順番に追加してから、親タグをカルーセルモジュールに追加できます。次に、対応する CSS スタイルを対応する要素に追加します
さて、アイデアについて話した後、コントローラーの描画を init() に含める必要があります。したがって、次のように記述できます:

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

 
init: function(options) { //options パラメータ: id (必須): 画像リストの親タグ ID; auto (オプション): 自動実行時間; インデックス (オプション): 開始画像のシリアル番号 
var wp = H$(options . id), // 画像リストの親要素を取得します 
ul = H$$('ul',wp)[0], // 
li = this.li = H$$('li ', ul); 
this.a = options.auto?options.auto:2; //自動実行間隔 
this.index = options.position?options.position:0; running (0 から開始) 
this.l = li.length; 
this.cur = this.z = 0; //現在表示されている画像番号&&z-index 変数
nav_wp = document.createElement('div '); // まず、コントローラーの親タグとして div を作成します。
nav_wp のセマンティクスを使用することもできます。 .style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;' //スタイルを設定します 
/* ==フェードインおよびフェードアウト機能を追加します==*/ 
for(var i =0;ithis.li[i].o = 100; //各画像の透明度の変更を設定します 
this.li[i] .style. opacity = this.li[i].o/100; //IE 以外の場合は、 opacity
this.li[i].style.filter = 'alpha(opacity=' this.li[ i].o ' )'; //IE はフィルターを使用します 
/* == 描画コントローラー == */ 
var nav = document.createElement('a'); //ここでは a を直接使用します。セマンティクスを考慮する場合は、li 
nav.className = options.navClass?options.navClass:'fader-nav'; //コントローラー クラス、デフォルトは 'fader-nav'; タグを使用してコントローラーを制御することもできます。 🎜>nav.innerHTML = i 1; 
nav.onclick = new Function(this.anchor '.pos(' i ')'); // onclick イベントをバインドし、以前に作成した pos() 関数を直接呼び出します。 🎜>nav_wp.appendChild(nav); 
} 
wp.appendChild(nav_wp) //コントローラーはページに追加します 
this.pos(this.index); }, 
 
 
上記のコードは、コントローラーを追加した後の完全な init() であり、合計 7 行のコードが追加されます。 
これを書いていると、試してみたいと思った友人もいるかもしれませんが、追加したコントローラーが表示されないことに気づきました。 。 。 

あはは、忘れないでください。画像の表示と非表示を制御するために z-index を使用します。他の人の z-index は最初から 1 つずつ増加し続けますが、コントローラーのデフォルトの z-index は 0 だけです。が構築されていますが、もちろんそれを表示することはできません。したがって、このコントローラーの Z インデックスを制御するコードをもう 1 行追加する必要があります。そのため、常にカルーセル要素の一番上に表示されます。
そこで、変換関数 pos() で、

コードをコピーコードは次のとおりです。 pos:function(i){

clearInterval(this.li.a) //自動変更タイマーをクリア

clearInterval(this.li[i].f);フェード エフェクト タイマー 
this.z ; 
this.li[i].style.zIndex = this.z; //毎回次の画像の z-index を 1 ずつ増やします。 zIndex = this. z 1; // コントローラーの z インデックスは、カルーセル要素の最大の z インデックスよりも 1 大きい必要があります。 
this.cur = i; // 正しいシリアル番号をバインドします。現在表示されている画像の 
this.li .a = false //クリアタイマーが完了したことを示すマークを作成します
//this.auto(); run
if(this.li[i].o> ;=100){ //フェードインする前に画像の透明度を透明に設定します 
this.li[i].o = 0; [i].style.opacity = 0; 
this.li[i].style.filter = 'alpha(opacity=0)'; 
} 
this.li[i].f = setInterval (new Function(this.anchor '.fade(' i ')'),20); 
}, 

 
上記のコードは、実際には 6 行目に 1 つの文を追加するだけです。 
これら 8 つの追加文とそれに対応する CSS により、コントローラーが形になり始めました。コントローラーの CSS は次のとおりです

コードをコピーします

コードは次のとおりです:.fader-nav{表示:インラインブロック;マージン右:8px;カラー:#fff;パディング:2px 6px;背景:#333;ボーダー:1px ソリッド #fff;フォントファミリー:タホマ;フォントの太さ:太字;フォントサイズ: 12px;カーソル: ポインタ;}
プロトタイプの効果を見てみましょう。

[Ctrl A すべて選択注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

現在のコントローラーのスタイルが欠落していることに気づきましたか?したがって、2 つの文を追加する必要があります。1 つは init()
this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; // pos( でコントローラーの現在のスタイル変数を定義します) ) pos() 内の対応する
に割り当てます:
for(var x=0;xnav_wp.getElementsByTagName('a')[x ].className = x==i?this.curC:'fader-nav'; // 現在のコントローラースタイルをバインドします
}
これに加えて現在の状態の CSS スタイル:
.fader-cur-nav {display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px Solid #fff;font-family:Tahoma;font -weight:bold;font-size :12px;cursor:pointer;}

これで基本的にはOKです。効果を見てみましょう:

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、を実行するために更新する必要があります]
Well, okay, the above effect is actually enough in most cases, but some friends have more needs and want to add a picture note layer at the bottom. This function will be implemented in the next part!