2007年10月17日
JavaScriptでFlashライクにスライドショー
こんなのを作ってみた。
業者さんがあげてきたFlashで、こういう風に写真がフェードアウトしながら切り替わる形のスライドショーがあったのだが、写真を簡単に入れ替えられないのがムカついて作ってみた。おそらくこんなことが出来るライブラリはいくらでもあるんだろうが、勉強もかねて自作。
ソースはこちら → viewslide.js
使い方
htmlのhead部に以下の用に記述。
<script type="text/Javascript" src="viewslide.js"></script>
<script type="text/javascript">
window.onload = function(){
viewSlide("slide",249,187,["1.jpg","3.jpg","4.jpg","5.jpg","6.jpg","8.jpg","9.jpg","12.jpg"]);
}
</script>body内でスライド描画したい位置に以下のように記述。
<div id="slide"></div>説明
viewslide.js内の関数viewSlide()を呼び出しています。引数は左から
- 描画するhtml内のid
- 領域の幅
- 領域の高さ
- 画像ファイルの配列
となっています。関数の引数にidを指定して描画域を指定する方法は、Nifty Corners Cubeの影響を受けている。
また、これを作っているときに一行でIEのJavaScriptを高速化する方法なんて記事がタイムリーに話題になっていたので、私も使わせてもらった。
それと、次の新規サイト制作セットを一部使わせてもらった。
稚拙なコードなんで笑ってやってください。と言うかあんま見ないでください。
いろいろ課題があって、特に以下の問題に対応しないと致命的な問題になりかねない。
- 画像が読み込み終わってからスライドを開始するようにする
- 画像が無いときやレガシーブラウザに対するエラー処理をしっかりする
書きなぐった感じなので、その辺り細かい配慮が足りない。他にも以下のような辺りに対処したい。
- スライド間の秒数や、フェードアウトのスピードを調整出来るようにする
- id指定して配置できるくせに、現状ページ内に1箇所しかスライドを配置できない。複数個のスライドを配置できるようにしたい
- グローバル空間汚しすぎ
1番上は、そんなに難しいことではない。そもそもviewslide.js内の定数をいじれば調整可能なのだが、もうちょっと簡単に実現出来るようにしたい。関数の引数で指定できるようにすればよいのかもしれないが、そんなにいくつも引数指定したら訳わかんなくならないかなとか思って躊躇中。オーバーロード出来るようにして引数省略出来るようにすりゃいいのかもしれないけど。
2番目の実現にはもうちょっと試行錯誤が必要そう。いまいち複数setTimeoutを走らせたときなんかにどうなるかが分かってない。
3番目は、もう、自分の未熟さを思い知る羽目になりました。setTimeoutを使うと、どうしても制御変数やら使いまわす変数やらをグローバル変数にしないといけないような気がするのだが、もう少しスマートに書く方法が絶対あると思う。
本当は、名前空間を上手く定義したり、window.onloadも他との競合を防ぐために使わない方が良いんだろうね。