[JS]画像をフェードで切り替えるスライドショーのスクリプト -blackbox
Post on:2010年1月19日
sponsors
Flashのように美しいフェードで画像を次々に表示するスライドショーのスクリプトをlab111から紹介します。
それぞれの画像は、下記のようにリスト要素で実装されています。
HTML
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <ul id="myBlackcubeSlideShow"> <li><img src="photo1.jpg" alt="Foto 1" /></li> <li><img src="photo2.jpg" alt="Foto 2" /></li> <li><img src="photo3.jpg" alt="Foto 3" /></li> </ul> </textarea> |
スクリプトの設置は簡単で、スクリプトを外部ファイルとして指定し、表示時間やサイズを指定します。
|
1 2 3 |
<textarea name="code" class="js" cols="60" rows="5"> var mySlideshow = new Blackbox('myBlackcubeSlideShow', { wait: 3000, height: 350 }); </textarea> |
オプションでは他にも、背景色、持続時間、最初に表示する画像などが指定できます。
またスライドのスタートとストップボタンも任意で設置が可能です。
スクリプトのライセンスはMIT Licenseです。
実装にはMooToolsのプラグインのためmootools.jsが必要です。
sponsors
