JavaScript編~サムネイル画像切り替え~

見たい画像を選択してみて

HTMLのソースコード

<div class="img">
  <div>
    <img src="images/j1.jpg" id="bigimg">
  </div>
  <ul>
    <li><img src="images/j1.jpg" class="thumb" data-image="images/j1.jpg"></li>
    <li><img src="images/j2.jpg" class="thumb" data-image="images/j2.jpg"></li>
    <li><img src="images/j3.jpg" class="thumb" data-image="images/j3.jpg"></li>
  </ul>
</div>

CSSのソースコード

section img {
  max-width: 100%;
}

.img {
  margin: 0 auto 0 auto;
  width: 90%;
}

.img ul {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.img li {
  float: left;
  margin-right: 1%;
  width: 32.33%;
}

JavaScriptのソースコードと概要

var thumbs = document.querySelectorAll(".thumb");

for (var i = 0; i < thumbs.length; i++) {
  thumbs[i].onclick = function () {
    document.getElementById("bigimg").src = this.dataset.image;
  };
}

querySelectorAllメソッド

document.querySelectorAll("CSSセレクタ")

今回使用したメソッドは1つではなく()内で指定したCSSのセレクタにマッチする要素全てを取得します。

セレクタに『.thumb』を指定してるためclass属性のthumbが全て取得されて、変数『thumbs』に代入してます。

thumbs[i].onclick = function () { document.getElementById("bigimg").src = this.dataset.image; };

取得した要素全てにイベント設定する為にfor文を行い、onclickイベントを設定します。

this

thisはイベントが発生した要素を指す
今回はonclickによりクリックされた要素で、イベントに設定するファンクションの中で使えます。

data-*属性とdatasetプロパティ

HTMLで記述したdata-*属性の属性名は自由に決めていい(※大文字は不可)
JavaScriptでその値を利用する際に記述する。
そして、onclickで設定したファンクション内の値をclass属性の『bigimg』と属性を書き換える！

サムネイル画像の切り替え