index.html

<div class="center">
        <div>
            <img src="img1.jpg" id="bigimg">
        </div>
        <ul>
            <li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
            <li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
            <li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
            <li><img src="thumb-img4.jpg" class="thumb" data-image="img4.jpg"></li>
        </ul>
    </div>

大きな画像（メイン）をdivタグで囲みます。
そして、その他のサブ写真をulタグで囲み、liタグでリスト化をします。
そして、それらをcenterで囲みます。

index.js

const thumbs = document.querySelectorAll('.thumb');
thumbs.forEach(function(item, index) {
    item.onclick = function() {
        console.log(this.dataset.image);
    }
});

前回の記事で、querySelectorメソッドを使用しましたが、今回使用するquerySelectorAllは(cssセレクター)内で指定された値をすべて取得してくれます。
今回は、thumbを指定しているので、ulの中にある全てを取得してくれます。

今回、配列の繰り返し処理でfoeEachを使います。

文法は以下のようになります。
配列.forEach(function (item, index){
処理内容
});

パラメータitemに配列の項目o番目の項目が入ります。二番目のパラメータでは、index番号が代入されます。
具体的な処理内容に入ります。
console.logのthisは、イベントが発生した要素を指します。今回では、data-image="img1.jpgになります。
htmlをみてみるとdata-imageとなっています。
これは、data-何でも好きな名前を付けても良いとなっています。
よって、(取得した要素(今回はonclick).dataset.何でも属性で付けた名前)になります。

このままでは、画像の切り替えができないのでJS側を書き換えて行きたいと思います。

index.html

 document.getElementById('bigimg').src = this.dataset.image;

取得した要素（id▶bigimage).属性（src）（ここまでで読み取り） = 値(this.dataset.image)（ここまでで書き換え）になります。

　出典
https://www.amazon.co.jp/%E7%A2%BA%E3%81%8B%E3%81%AA%E5%8A%9B%E3%81%8C%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1/dp/4815601577