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

少なくとも、これがこのシリーズの最後の部分になるはずです。
パート 3 の効果は、基本的にほとんどのニーズを満たしています。したがって、この部分はおまけとしか考えられません。早速、ブログ投稿を続けてみましょう。
実際、背景が半透明のメモのカルーセル効果は、163、qq、淘宝網などのオンラインでも利用できます。注意深く検索すると、同様の効果が表示されるはずです。テキストの追加は、実際には前の記事でコントローラーを追加する方法と似ています。別の要素を追加し、その中にテキストを表示するだけです。

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

/* -- メモを表示--* /
var alt = this.alt = document.createElement('p'); //テキストを表示するための p タグを追加します
this.img = []
for(var k=0;kthis.img.push(H$$('img',this.li[k])[0]); //カルーセルモジュール内の画像を抽出することが目的です。 get alt
}
.
.
.
wp.appendChild(alt); //
this.textH = nav_wp.offsetHeight; '高さ:' this.textH 'px;line-height:' this.textH 'px;color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0; bottom: 0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);' //このレイヤーにスタイルを追加します

上記は init() 関数に 2 つのコードを追加したものです。どれもわかりやすい。詳細には触れません。加えて。また、変換関数の Z インデックス値を変更して、コントローラーが最高レベルのテキスト レベルになるようにします。同時に、このテキスト レイヤーに代替テキストを書き込みます。スライド効果が必要な場合は、 pos() で高さを 0 にするには、 fade() で高さの変換を行うだけです (top または left を使用することもできます)。したがって、 pos() のコードを次のように変更します。 >
コードをコピー

コードは次のとおりです: this.alt.style.zIndex = this.z 1; nav_wp.style。 zIndex = this.z 2; .

this.alt.style.height = 0; // メモレイヤーのスライド効果を作成します

this.alt.innerHTML = this.img [i].alt; //代替テキストを挿入


テキストレイヤーに高さの変更効果がある場合は、fade() にテキストレイヤーの高さの変更に関する文を追加するだけです:

コードをコピー

コードは次のとおりです。 this.alt.style.height = Math.ceil( this.li[i].o*this.textH/100) 'px' ; //テキストのスライド効果を作成します まあ、これでほぼ完了です。最終的な効果を見てみましょう。

ステップ4 <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;} .fader-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;} .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;} --></style> <div id="fader"><ul> <li> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201010/20101011221558299.jpg" class="lazy" _mce_ alt="画像注釈を使用したフェードインおよびフェードアウト プラグインの作成方法を段階的に説明します (4)_JavaScript スキル"> </li> <li> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201010/20101011221558112.jpg" class="lazy" _mce_ alt="画像注釈を使用したフェードインおよびフェードアウト プラグインの作成方法を段階的に説明します (4)_JavaScript スキル"> </li> <li> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201010/20101011221558758.jpg" class="lazy" _mce_ alt="画像注釈を使用したフェードインおよびフェードアウト プラグインの作成方法を段階的に説明します (4)_JavaScript スキル"> </li> <li> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201010/20101011221558158.jpg" class="lazy" _mce_ alt="画像注釈を使用したフェードインおよびフェードアウト プラグインの作成方法を段階的に説明します (4)_JavaScript スキル"> </li> <li> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201010/20101011221558834.jpg" class="lazy" _mce_ alt="画像注釈を使用したフェードインおよびフェードアウト プラグインの作成方法を段階的に説明します (4)_JavaScript スキル"> </li> </ul></div> [Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]
Well, at the end of the article, I almost forgot to mention a very critical point, which is the configuration parameters of options:
When instantiating new Hongru.fader.init(), the second parameter is the configuration parameter. It is an object, and the optional configuration parameters are as follows
{
id: //(required), carousel list parent element id
auto: //(optional) automatic playback interval seconds
navClass: //(optional) Controller className
curNavClass: //(optional) Controller current state className
index: //(optional) From which position to start playing during initialization, the default is 0, that is, the first element
}
Okay, this series ends! ! You can change the source code yourself