jQuery/ImageSwitcher

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　　←　jQueryをご準備下さい
• images
  • PIC_01.jpg
  • PIC_02.jpg
  • ：
  • PIC_05.jpg

HTML 付記

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

JavaScript 付記

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

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

• クラス .select-button（この例では全５要素）それぞれ（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 の数字を一つ増やします。
    そのタイミングで、数字が 最大値（この場合は５）になったら 0 戻すかたちで、NEXT を連続クリックできるようにしています。
  • #picture（img要素）の src に fileName[current] を割り当てます
  • #caption の html として fileName[current] を記載します
    
    
    
    

APPENDIX

同じ内容のものを ネイティブ JavaScript で記述したバージョンもあります。
＞ JavaScript/ImageSwitcher