#author("2021-06-10T16:12:04+09:00;2021-06-07T17:21:09+09:00","default:inoue.ko","inoue.ko")
* 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 &small(ネイティブ JavaScript です。ライブラリ等は不要です。);
-images
--PIC_01.jpg
--PIC_02.jpg
--：
--PIC_05.jpg
~
***HTML
#gistit(koichi-inoue/JS_ImageSwitcher/blob/main/index.html,,400)
-画像素材の増減に応じて #selector 部分のリスト項目を増減させて下さい。
~
~
***CSS
#gistit(koichi-inoue/JS_ImageSwitcher/blob/main/style.css,,400)
~
***JavaScript
#gistit(koichi-inoue/JS_ImageSwitcher/blob/main/script.js,,400)
-はじめに、配列変数 fileName に画像素材のファイル名（フルパス）を登録しています。画像の増減がある場合は、ここを調整して下さい。
-複数の関数で共有する外部変数を定義しています。
--変数 current は、現在 #picture 部分に表示されている画像の番号（配列の添字にあたる数字）を意味します（最初は「0」）。
--変数 picture には、#picture 要素（＜img＞）を取得します。
--変数 caption には、#caption 要素（＜p＞）を取得します。
- window.onload 以下、ボタンにイベントリスナーを登録しています。
--クラス .select-button（この例では全５要素）のそれぞれ（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] を記載します。
-function changeNext(event) の定義
--current の数字を一つ増やします。
そのタイミングで、数字が 最大値（この場合は５）になったら 0 戻すかたちで、NEXT を連続クリックできるようにしています。
--#picture（img要素）の src に fileName[current] を割り当てます。
--#caption の html として fileName[current] を記載します。
~
~
**APPENDIX
まったく同じ内容のものを jQuery を用いて記述したバージョンもあります。
＞ [[jQuery/ImageSwitcher]]
~
~
