xfade2 :: JavaScriptを使ったスライドショー

スライドショーは、Flashを使ったものが一般的ですが、JavaScriptを使ってシンプルながらきれいなスライドが簡単にできます。
Image Cross Fader Redux のスクリプトの実装をしてみました

実装サンプルはこんな感じです。

<div id=”imageContainer”></div>の間に表示した写真データを順番にスライドショーするという優れモノ!!
しかも簡単に導入できるのでお勧めです。
Image Cross Fader Redux のページから、
Javascript Source
Initial CSS
CSS Imported with Javascript

のファイルを取得。
xfade2.jsが、javascriptの実体ですが、100行もない非常にシンプルな作り
31行目のid “imageContainer” は、lightBoxのidタグと同じなので両方を共存させたい場合には、この値を変更すれば、干渉しあうことがなくなります。(ちなみにサンプルは、”xfadeimage” に変更して実装してあります。
変更したら2つのCSSファイルのIDも変更しておきましょう。
36行目の
setTimeout(so_xfade,1000);
は、最初の画像の表示時間で1000=1秒です。値を変えれば表示時間が変わります。
58行目の
setTimeout(so_xfade,1000);
は、2枚目以降の画像の表示時間で1000=1秒です。値を変えれば表示時間が変わります。
スクリプトを見ると非常にシンプルで、でも効果は高いですので、これはとてもいいと思います。

コメント

タイトルとURLをコピーしました