LogoMark.png

JavaScript/ImageSwitcher のバックアップソース(No.4)

#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]]

~
~