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

前回の記事に引き続き、後編です。
始める前に、クロージャ内にすべての関数を記述することに関する上記の最適化問題について話しましょう。前述したように、初期化時に init を呼び出すだけでよいため、クロージャに init を記述するだけで、他の関数関数は init のプロトタイプ継承メソッドとして呼び出すことができます。したがって、前のコードは実際には次のように書き換えることができます:

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

var Honru= {};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
Hongru.fader = function (){
function init(options){ //オプションパラメータ: id (必須): 画像リストの親タグ ID; auto (オプション): 自動実行時間インデックス (オプション): 実行の開始画像のシリアル番号
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) //変換関数
}
init.prototype = {
auto:function(){
this.li .a = setInterval(new Function ('Hongru.fader.move(1)'),this.a*1000);
},
move:function(i){// パラメータには 2 つのオプションがありますi, 1 および -1,1 次のものに実行することを意味し、-1 は前のものに実行することを意味します
var n = this.cur i;
var m = i==1?n==this .l?0:n:nthis.pos(m); /前または次のカードに変換 Zhang
},
pos:function(i){
clearInterval(this.li.a);
this.z; i].style.zIndex = this .z; //次の画像の z-index を毎回 1 ずつ増やします
this.cur = i //現在表示されている画像の正しいシリアル番号をバインドします
this.auto(); //自動的に実行します
}
}
return {init:init}
}(); しかし、これは実際には問題があります。このように書き換えると見つかるかどうかはわかりませんが、auto 関数では 'Hongru.fader.move()' を呼び出すことができなくなります。 init のプロトタイプ継承を行ってから、「Hongru.fader.init.move() )」を呼び出します。実際、これは正しくありません。この問題については、以前の記事 http://www.cnblogs.com/hongru/archive/2010/10/09/1846636.html で説明しました。プロトタイプがインスタンス化されるまでは、init はアクセスできません。したがって、これを行うときは 2 つの問題に注意する必要があります。
1 つは、初期化中に new キーワードを使用して init をインスタンス化することです。
もう 1 つは、コード内でプロトタイプ メソッドを呼び出すときに、インスタンス化したオブジェクトからも呼び出す必要があるということです。たとえば、上記のコードを初期化するときは、次のようにする必要があります。 >

コードをコピーします


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

var newFader = new Honru.fader.init({ //この新しい機能は非常に優れていますimportantid:'fader' }); コード内で init メソッドを呼び出したい場合は、次のように新しいインスタンス化オブジェクト newFader を通じて呼び出す必要があります。上記の auto 関数 init の move メソッドを呼び出したい場合は、「newFader.move()」を直接呼び出すだけで機能します。

しかし、小さな問題があります。つまり、インスタンス化された変数名は、コード内で呼び出される名前と一致している必要があります。そのため、newFader1 を使用するなど、初期化オブジェクトの名前を変更する場合は、これは絶対に不可能なので、init でもう 1 つのパラメータを渡し、初期化時に変数名をパラメータと一致させてから、ソース コードのパラメータを通じてそれを呼び出すというちょっとしたトリックがあります。このようにして、問題は正常に解決されます。

(追記: コード内で new Function が使用されている理由は、スコープ チェーンを壊す可能性があるためでもあります。これは、コードをこの方法で構造化できることを保証するための条件の 1 つでもあります。)
概要: 前のコードは次のようになります。 最適化:

コードをコピー


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

var Honru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c) }
Hongru.fader = function(){
function init(anthor,options){this.anthor=anthor; this.init(options);}
init.prototype = {
init: function(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; //画像の実行を開始しますシリアル番号 (0 から始まります)
this.l = li.length;
this.cur = this.z = 0; //現在表示されている画像のシリアル番号&&z-index 変数
this.pos( this .index); //変換関数
},
auto:function(){
this.li.a = setInterval(new Function(this.anthor '.move(1)'),this . a*1000);
},
move:function(i){// パラメータ i には 1 と -1 の 2 つのオプションがあり、1 は次のパラメータに実行することを意味し、-1 は次のパラメータに実行することを意味します。前のもの。Zhang
var n = this.cur i;
var m = i==1?n==this.l?0:nthis.pos(m) //前または次の画像に変換します
},
pos: function(i ){
clearInterval(this.li.a);
this.z;
this.li[i].style.zIndex = this.z;毎回インデックスに 1 を加えます
this.cur = i; //現在表示されている画像の正しいシリアル番号をバインドします
this.auto(); //自動的に実行します
}
}
return {init: init}
}();

次のように初期化する必要があります:

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

var fader = new Honru.fader.init('fader',{ //最初のパラメータが変数名と一致していることを確認してください
id :'fader'
}) ;

さて、コード最適化計画はこれで終了です。以下はエフェクトの 2 番目の部分の実装です: フェードインおよびフェードアウトエフェクト
実際、上記の優れたコード構造とロジックを使用すると、フェードインおよびフェードアウトエフェクトを追加するのは比較的簡単です。変更する前に画像を透明にし、タイマーを渡して徐々に透明度を上げます。しかし、より重要な境界判断がいくつかあります。同時に、IE と非 IE で透明度を変更する場合は、異なる CSS 属性を使用することに注意する必要があります。
コア コードの変更は次の 2 つの段落です。1 つは透明度グラデーション関数 fade() を追加すること、もう 1 つは pos() --> で画像を透明にしてから fade の実行を開始することです。 ()
pos() にコードセグメントを追加します:

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

if(this .li[i].o>=100){ //フェードインする前に画像の透明度を透明に設定します。
this.li[i].o = 0; li[i].style .opacity = 0;
this.li[i].style.filter = 'alpha(opacity=0)';
}
this.li[i].f = setInterval(new Function(this .anthor '.fade(' i ')'),20);

次に、関数 fade()

を追加します。 コードをコピー コードは次のとおりです。

fade:function(i){
if(this.li[i].o> =100){
clearInterval (this.li[i].f); //透明度の変更が完了したら、タイマーをクリアします
if(!this.li.a){ //すべてのタイマーを確認します自動運転開始前にクリアされます。そうしないと、コントローラーをクリックする速度が速すぎると、タイマーがクリアされる前に次の変更が開始され、関数が台無しになります。 >else{ //透明度の変更
this.li[i].o =5;
this.li[i].style.opacity = this.li[i].o/100; .li[ i].style.filter = 'alpha(opacity=' this.li[i].o ')';
}
}


わかりました、とても簡単です。ただし、もう 1 つ覚えておくべきことは、pos() 呼び出しの開始時に最後のタイマーを忘れずにクリアする必要があるということです。 ！
以下にソース コード全体を投稿します:

コードをコピーします

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

var Honru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c) }
Hongru.fader = function(){
function init(anthor,options){this.anthor=anthor; this.init(options);}
init.prototype = {
init: function(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; // 実行開始番号 (0 から始まります)
this.l = li.length;
this.cur = this.z = 0; //現在表示されている画像のシリアル番号&&z-index 変数
/* == フェードを追加しますin およびフェードアウト関数 ==*/
for(var i=0;ithis.li[i].o = 100; //各画像に 1 つを設定します。透明度の変更
this.li[i].style.opacity = this.li[i].o/100; //IE 以外の場合は、opacity
this.li[i].style.filter を使用してください。 = 'alpha(opacity=' this.li[i].o ')' //IE フィルター
}
this.pos(this.index); //変換関数
}, auto:function(){
this.li.a = setInterval(new Function(this.anthor '.move(1)'),this.a*1000);
},
move : function(i){//パラメータ i には 1 と -1 の 2 つのオプションがあります。1 は次のピクチャに実行することを意味し、-1 は前のピクチャに実行することを意味します。
var n = this.cur i; var m = i==1?n==this.l?0:n:nthis.pos(m); //前または次の画像に変換します
},
pos:function(i){
clearInterval(this.li.a);自動変更タイマー
clearInterval(this.li[i].f); //フェードエフェクトタイマーをクリア
this.z;
this.li[i].style.zIndex = this.z ; //次のピクチャの z-index を毎回 1 ずつ増やします
this.cur = i; //現在表示されているピクチャの正しいシリアル番号をバインドします
this.li.a = false;以下で使用するマークを付けて、クリア タイマーが完了したことを示します。
//this.auto() //自動的に実行します
if(this.li[i].o>=100); { // 画像がフェードインする前に、画像の透明度を透明に設定します
this.li[i].o = 0;
this.li[i].style.opacity = 0; li[i] .style.filter = 'alpha(opacity=0)';
}
this.li[i].f = setInterval(new Function(this.anthor '.fade(' i ') '),20 );
},
fade:function(i){
if(this.li[i].o>=100){
clearInterval(this.li[i] .f); //透明度の変更が完了したら、タイマーをクリアします。
if(!this.li.a){ //自動操作を開始する前に、すべてのタイマーがクリアされていることを確認してください。そうしないと、コントローラーをクリックする速度が速すぎると、タイマーがクリアされる前に次の変更が開始され、関数が台無しになります。 >else{
this.li[i].o =5;
this.li[i].style.opacity = this.li[i].o/100; ].style .filter = 'alpha(opacity=' this.li[i].o ')'
}
}
}
return {init:init}
}( );


私が書いたメモに注目してください。
ランニング効果を見てみましょう:

ステップ2

<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title></title> <style type="text/css"><!-- #fader{position:relative;overflow:hidden;height:300px;width:500px} #fader li{position:absolute;left:0;top:0;} ul,li{list-style:none;margin:0;padding:0} img{display:block;} --></style> <div id="fader"> <ul> <li> <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101011214745247.jpg?x-oss-process=image/resize,p_40" class="lazy" _mce_ alt="注釈付きのフェードインおよびフェードアウト画像カルーセル プラグインの作成方法を段階的に説明します (2)_JavaScript スキル"> </li> <li> <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101011214745483.jpg?x-oss-process=image/resize,p_40" class="lazy" _mce_ alt="注釈付きのフェードインおよびフェードアウト画像カルーセル プラグインの作成方法を段階的に説明します (2)_JavaScript スキル"> </li> <li> <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101011214745113.jpg?x-oss-process=image/resize,p_40" class="lazy" _mce_ alt="注釈付きのフェードインおよびフェードアウト画像カルーセル プラグインの作成方法を段階的に説明します (2)_JavaScript スキル"> </li> <li> <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101011214745525.jpg?x-oss-process=image/resize,p_40" class="lazy" _mce_ alt="注釈付きのフェードインおよびフェードアウト画像カルーセル プラグインの作成方法を段階的に説明します (2)_JavaScript スキル"> </li> <li> <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101011214745668.jpg?x-oss-process=image/resize,p_40" class="lazy" _mce_ alt="注釈付きのフェードインおよびフェードアウト画像カルーセル プラグインの作成方法を段階的に説明します (2)_JavaScript スキル"> </li> </ul> </div> [Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]

ここでのフェードインとフェードアウトは単なるタイトルであることに気付いた人もいるかもしれませんが、実際にはフェードイン効果があるだけですが、効果は基本的にフェードアウトと同じです。フェードアウトしたい場合でも、2 つの文を変更するだけで済みます。笑
このパートはここで終わり、次のパートではコントローラーを追加します。