ImageSwicher
画像の切り替えサンプル|Native JavaScript Version
- DEMO:https://koichi-inoue.github.io/JS_ImageSwitcher/
- CODE:https://github.com/koichi-inoue/JS_ImageSwitcher
サンプルのディレクトリ構成
- index.html
- style.css
- script.js ネイティブ JavaScript です。ライブラリ等は不要です。
- images
- PIC_01.jpg
- PIC_02.jpg
- :
- PIC_05.jpg
HTML 付記
- 画像素材の増減に応じて #selector 部分のリスト項目を増減させて下さい。
JavaScript 付記
- はじめに、配列変数 fileName に画像素材のファイル名(フルパス)を登録しています。画像の増減がある場合は、ここを調整して下さい。
- 複数の関数で共有する外部変数を定義しています。
- 変数 current は、現在 #picture 部分に表示されている画像の番号(配列の添字にあたる数字)を意味します(最初は「0」)。
- 変数 picture には、#picture 要素(<img>)を取得します。
- 変数 caption には、#caption 要素(<p>)を取得します。
- window.onload 以下、ボタンにイベントリスナーを登録しています。
- クラス .select-button(この例では全5要素)のそれぞれ(for)の 'click' イベントについて、要素が何番めのものかを識別させるための引数 i と、イベントハンドラーとしての selectImage を登録。
- ID #prevButton にイベントリスナー changePrev() を登録。
- ID #nextButton にイベントリスナー changeNext() を登録。
- function selectImagev(event) の定義
- current に this.number を代入する
- #picture(img要素)の src に fileName[current] を割り当てます
- #caption の html として fileName[current] を記載します
- function changePrev(event) の定義
- current の数字を一つ減らします。
そのタイミングで、数字が 0 未満になった場合は、最大の番号に戻すかたちで、PREV を連続クリックできるようにしています。 - #picture(img要素)の src に fileName[current] を割り当てます。
- #caption の html として fileName[current] を記載します。
- current の数字を一つ減らします。
- function changeNext(event) の定義
- current の数字を一つ増やします。
そのタイミングで、数字が 最大値(この場合は5)になったら 0 戻すかたちで、NEXT を連続クリックできるようにしています。 - #picture(img要素)の src に fileName[current] を割り当てます。
- #caption の html として fileName[current] を記載します。
- current の数字を一つ増やします。
APPENDIX
まったく同じ内容のものを jQuery を用いて記述したバージョンもあります。
> jQuery/ImageSwitcher