JavaScript、クリックで画像切り替え。

リクエストいただきました。

こんにちは、「ふ」です。

JavaScriptを使い、ボタンをクリックすることで表示されている画像を順番に切り替える、というものを作ってみます。
ネットショップの商品紹介などでは頻繁に使われている実装です。簡単に作成できるので、試してみてください。

以前「JavaScriptで画像切り替えをループさせる」という記事をリリースしたのですが、読者様から「ループさせない場合のコードが知りたい」とのリクエストをいただきました（ありがとうございます）。

今回はそのリクエストにお応えさせていただきます。
「ループさせたい」方は⬇︎の記事をご覧ください。

JavaScript、画像切り替えをループさせる。

〽️ ユーザに親切な切り替えを実装。

仕組み。

画像切り替えには色々なやり方があると思いますが、今回は「img要素のsrc値を配列に格納」という方法を考えました。そうすれば配列の内容を操作するだけで、画像の追加や削除も瞬時にできるようになります。

img要素とボタンを用意し、はじめに表示させたい画像を配置しておきます。

いっぽうで、使いたい画像のurlを配列に格納しておきます。

setAttributeメソッドで配列の要素をsrc属性の値にセットしてやれば、該当するurlの画像を表示させることが可能です。

さらにcounter用の変数を用意しておき、進む/戻るボタンで変数を増減させます。
増減させた変数値をそのまま配列のインデックスに対応させれば、順次表示させる画像を切り替えていくことができる、という仕組みです。

ただし。
counter変数を単に増減させてしまうと、配列のインデックス以上の値や0未満の値になってしまいます。そうなると画像が表示されません。
そのため、if文でcounter変数の増減を制御する必要も出てきます。

要素を準備。

それでは要素を準備していきましょう。

画像は4枚用意しました。
これらを表示する領域と、進む/戻るボタンを配置していきます。

<div id = "area">
<img id = 「「５"image"」」 src = "a.svg"> 
</div>
    
<div id = "buttons">
      <button onclick = 「「２"modoru()"」」> ◀︎ </button>
      <button onclick = 「「２"susumu()"」」> ▶︎ </button>
</div>

HTMLです。
JavaScriptで参照できるよう、<img>要素にはid名「image」をつけておきます。
２つの<button>要素にはonclick属性にsusumu/modoru関数を指定しました。関数の内容はのちほど書いていきます。

 #area {
        width:50%;
        padding:5%;
        margin:0 auto;
        border:solid 0.5px;
    }

#buttons {
    display:flex;
    width:50%;
    margin:0 auto;
    justify-content:space-between;
}

#buttons button {
    display:block;
    padding:5% 10%;
    font-size:115%;
} 

CSSでレイアウトしています。
ここはお好みの配置にしてください。

◀︎ ▶︎

現在の状態⬆︎です。
それではJavaScriptで画像切り替え機能をつくっていきましょう。

JavaScriptを書いていく。

「仕組み」のセクションでの解説を思い出しながら、JavaScriptを実装していきましょう。

「「３//imgソースの値を配列に格納」」「「１ ..@1@」」
const images = ["a.svg","b.svg","c.svg","d.svg"]
「「３//img要素を取得」」「「１ ..@2@」」
const image = document.getElementById("image"); 
「「３//カウント変数を初期化」」「「１ ..@3@」」
let count = 0;
 
「「３//次の画像に切り替える」」「「１ ..@4@」」
function susumu() {
    「「３//countが配列の要素数以下なら」」「「１ ..@5@」」
    if(count<images.length-1){
        count++;
    image.setAttribute("src",images[count]);
    }   
}
 
「「３//前の画像に切り替える」」「「１ ..@6@」」
function modoru() {
    「「３//countが0より大きければ」」「「１ ..@7@」」
    if(count>0) {
        count--;
        image.setAttribute("src",images[count]);
    }
}

@1@ 配列「images」を作り、表示させる画像のurl一覧をならべておきます。

@2@ <img>要素を取得。

@3@ 配列のインデックスに対応させるカウント変数「count」を作り、初期値を0としておきます。

@4@ 進むボタンを押したときの関数です。

@5@ ここで、count変数が画像の数をオーバーしないように条件づけしておきましょう。
配列のindexは0から始まっているので、終端の画像srcのindexは「images.length-1」と表現できます。
その条件下においてのみ、count変数を増加。
増加した数値を配列のindexに置き換え、setAttributeメソッドで<img>要素のsrc属性値にセットします。

@6@ 今度は戻るボタンを押したときの関数です。

@7@ countが0未満の場合、配列要素が見つからなくなります。そのためここでも「count>0」という条件を設けましょう。
その条件を満たしている場合、count変数を減算→その数値を配列のindexとして扱い、src属性値にセットします。

完成。

◀︎ ▶︎

結果⬆︎です。
実際にボタンをクリックしてみてください。押すごとに画像が切り替わるようになりました。
おつかれさまでした。

リクエストお待ちしてます。

今回は読者様のリクエストを元に、記事を作成させていただきました。当記事をお読みの方も「こんなものを作ってみたい」というのがあれば、ぜひ冒頭の✉️アイコンから、ご意見をお寄せください。
「ふ」としてもみなさんが求めているものを知ることができ、とても参考になるとともに、記事づくりの大きな励みとなります。

最後までお読みくださり、ありがとうございました。
ではまた〜 🎵