【JS】Javascriptでパラパラ画像表示（制御ボタン付き）を作ってみる

2枚以上の画像をパラパラと切り替えるスクリプトをjavascriptで作ってみましたので、ご紹介。
ごくごく簡単なイメージギャラリーのようなイメージです。

パラパラ画像切替スクリプト

デモ

※jQuery必須です。

スクリプト

HTML

画像ファイルの名称を「img1.jpg」から「img10.jpg」として、imgフォルダに設置します。
htmlには最初に表示したい画像（start.jpg）を配置します。

[html]

[/html]

Javascript

画像10枚を配列にセットし、setInterval() で画像の切り替え処理を繰り返しているだけです。
切り替えに関しては、パスを含む画像名を配列にセットし、ループごとに画像名の数字をカウントアップするしようとしています。

この辺りはjQueryの画像インデックスを利用するなど他にもやりようはあると思いますが、簡単に配列を作成する方式をとりました。

[js]

[/js]

(2015.11.21追記) 制御ボタンをつけてみた

「スタート」「ストップ」だけでは味気ないので、コマ送り、最初、最後に戻れるボタンをつけてみました。
それとも無い、start画像を用意し、JSを若干ではありますが改修しています。

デモ

スクリプト

HTML

初回時やリロード後しか表示しない初期画像（start.jpg）を配置。
スタート、ストップに加え、

• 「<<」最初
• 「<」前
• 「>」次
• 「>>」最後

ボタンを追加します。

[html]

[/html]

Javascript

[js]

[/js]

デモ１と違うところは、表示するファイルを定義いる配列番号のカウントアップ（及びダウン）のタイミング。
デモ１は表示後にカウントアップしていますが、デモ２は表示前にカウントアップし、アップ後の配列番号内容を参照するようにしています。
なので、最初の変数定義で now に -1 を持たせています。

作りこむ段階でその方が分かりやすかったので、採用しました。

パラパラ実行のあとは、各制御ボタンをクリックイベントでそれぞれの処理を行っているだけの、相変わらずのシンプルな内容となっています。

拡張していく基礎のようなスクリプトかな、と自分では思っています。
いわゆるイメージギャラリー（のようなもの）ですが、こんな簡単に出来るものなのですねぇ。

-Javascript,jQuery
-ギャラリー, パラパラマンガ, 画像切替