LogoMark.png

jQuery/ImageSwitcher のバックアップ差分(No.2)


#author("2021-06-07T17:20:14+09:00;1970-01-01T18:00:00+09:00","default:inoue.ko","inoue.ko")
* ImageSwicher 2
jQuery を用いた画像の切り替え
#author("2021-06-10T15:35:00+09:00;2021-06-07T17:20:14+09:00","default:inoue.ko","inoue.ko")
* ImageSwicher 
画像の切り替えサンプル|jQuery Version
~

-DEMO:https://koichi-inoue.github.io/JQ_ImageSwitcher/
-CODE:https://github.com/koichi-inoue/JQ_ImageSwitcher

~

(準備中)
***サンプルのディレクトリ構成
-index.html
-style.css
-script.js
-jquery-3.6.0.min.js  ← &scale(80){__[[jQuery]]__をご準備下さい};
-images
--PIC_01.jpg
--PIC_02.jpg
--:
--PIC_05.jpg

~


***HTML
#gistit(koichi-inoue/JQ_ImageSwitcher/blob/main/index.html,,400)

-画像素材の増減に応じて #selector 部分のリスト項目を増減させて下さい。
~

***CSS
#gistit(koichi-inoue/JQ_ImageSwitcher/blob/main/style.css,,400)
~

同じものをネイティブ JavaScript で実装した例 > [[Javascript/ImageSwitcher]] 
***JavaScript
#gistit(koichi-inoue/JQ_ImageSwitcher/blob/main/script.js,,400)

-はじめに、配列変数 fileName に画像素材のファイル名(フルパス)を登録しています。画像の増減がある場合は、ここを調整して下さい。

-変数 current は、現在 #picture 部分に表示されている画像の番号(配列の添字にあたる数字)が入ります(最初は「0」)。

-クラス .select-button(この例では全5要素)それぞれ(each)に、 on('click' のイベントリスナーを登録します。その際、何番めの要素がクリックされたかを、変数 i として扱い、すべての i 番めの要素に以下の処理を登録します。
--current に i を代入する
--#picture(img要素)の src に fileName[current] を割り当てます
--#caption の html として fileName[current] を記載します

-ID #prevButton にイベントリスナーを登録します。これがクリックされたら
--current の数字を一つ減らします。
そのタイミングで、数字が 0 未満になった場合は、最大の番号に戻すかたちで、PREV を連続クリックできるようにしています。
--#picture(img要素)の src に fileName[current] を割り当てます
--#caption の html として fileName[current] を記載します

-ID #nextButton にイベントリスナーを登録します。これがクリックされたら
--current の数字を一つ増やします。
そのタイミングで、数字が 最大値(この場合は5)になったら 0 戻すかたちで、NEXT を連続クリックできるようにしています。
--#picture(img要素)の src に fileName[current] を割り当てます
--#caption の html として fileName[current] を記載します
~
~
**APPENDIX
同じ内容のものを ネイティブ JavaScript で記述したバージョンもあります。
> [[JavaScript/ImageSwitcher]]

~
~