ホームページ > 記事 > ウェブフロントエンド > 画像注釈を使用したフェードインおよびフェードアウト プラグインの作成方法を段階的に説明します (3)_JavaScript スキル
画像注釈を使用したフェードインおよびフェードアウト プラグインの作成方法を段階的に説明します (3)_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 18:18:51989ブラウズ
実際、以前の適切なコード構造を使用すると、コントローラーを追加するのは非常に簡単です (^_^ 初期アーキテクチャのコード構造が非常に重要だと述べたのはこのためです!)
最初にアイデアについて話しましょうコントローラーの追加:
カルーセル要素の数に応じて、対応するコントロール ボタンを各要素に追加します (ここでは 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;i
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 行のコードが追加されます。
これを書いていると、試してみたいと思った友人もいるかもしれませんが、追加したコントローラーが表示されないことに気づきました。 。 。
そこで、変換関数 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 は次のとおりです
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 は次のとおりです
コードをコピーします
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。