[JS]画像をフェードで切り替えるスライドショーのスクリプト -blackbox

Flashのように美しいフェードで画像を次々に表示するスライドショーのスクリプトをlab111から紹介します。

blackbox
demo

それぞれの画像は、下記のようにリスト要素で実装されています。

HTML

<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>

スクリプトの設置は簡単で、スクリプトを外部ファイルとして指定し、表示時間やサイズを指定します。

var mySlideshow = new Blackbox('myBlackcubeSlideShow', { wait: 3000, height: 350 });

オプションでは他にも、背景色、持続時間、最初に表示する画像などが指定できます。
またスライドのスタートとストップボタンも任意で設置が可能です。

スクリプトのライセンスはMIT Licenseです。
実装にはMooToolsのプラグインのためmootools.jsが必要です。

Post on:2010年1月19日