#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(この例では全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] を記載します。 -function changeNext(event) の定義 --current の数字を一つ増やします。 そのタイミングで、数字が 最大値(この場合は5)になったら 0 戻すかたちで、NEXT を連続クリックできるようにしています。 --#picture(img要素)の src に fileName[current] を割り当てます。 --#caption の html として fileName[current] を記載します。 ~ ~ **APPENDIX まったく同じ内容のものを jQuery を用いて記述したバージョンもあります。 > [[jQuery/ImageSwitcher]] ~ ~