【JavaScript】サムネイルクリックでメイン画像を切り替える方法

2025.6.4

【JavaScript】サムネイルクリックでメイン画像を切り替える方法

今回はサムネイル画像をクリックするとメイン画像が切り替わるJavaScriptをご紹介します。

こんな感じです。

HTMLの記述

HTML
<img id="mainImage" src="https://www.nan-demo.work/image/sample01.jpg" alt="Main Image">
<ul id="thumbnailWrap">
  <li><img class="thumbnail" src="https://www.nan-demo.work/image/sample01.jpg" alt="Thumbnail 1"></li>
  <li><img class="thumbnail" src="https://www.nan-demo.work/image/sample02.jpg" alt="Thumbnail 2"></li>
  <li><img class="thumbnail" src="https://www.nan-demo.work/image/sample03.jpg" alt="Thumbnail 3"></li>
  <li><img class="thumbnail" src="https://www.nan-demo.work/image/sample04.jpg" alt="Thumbnail 3"></li>
  <li><img class="thumbnail" src="https://www.nan-demo.work/image/sample05.jpg" alt="Thumbnail 3"></li>
</ul>

CSSの記述

CSSは適宜変更してください。

CSS
img {
  width:100%;
}

#mainImage {
  width:100%;
}

#thumbnailWrap{
  display: flex;
  padding: 0;
  width:100%;
}

#thumbnailWrap li {
  width:20%;
  list-style: none;
}

JavaScriptの記述

JavaScript
// サムネイル画像をクリックしたときの処理
document.querySelectorAll('.thumbnail').forEach(thumbnail => {
  thumbnail.addEventListener('click', () => {
    // メイン画像をサムネイル画像の src に切り替える
    document.getElementById('mainImage').src = thumbnail.src;
  });
});

実装結果

See the Pen
サムネイル画像クリックでメイン画像切り替え（js） by Uchaaan (@Uchaaan)
on CodePen.

では、次にサムネイルにカレントをつける場合のJavaScriptをご紹介します。

HTMLの記述

HTML
<img id="mainImage" src="https://www.nan-demo.work/image/sample01.jpg" alt="Main Image">
<ul id="thumbnailWrap">
  <li><img class="thumbnail current" src="https://www.nan-demo.work/image/sample01.jpg" alt="Thumbnail 1"></li>
  <li><img class="thumbnail" src="https://www.nan-demo.work/image/sample02.jpg" alt="Thumbnail 2"></li>
  <li><img class="thumbnail" src="https://www.nan-demo.work/image/sample03.jpg" alt="Thumbnail 3"></li>
  <li><img class="thumbnail" src="https://www.nan-demo.work/image/sample04.jpg" alt="Thumbnail 3"></li>
  <li><img class="thumbnail" src="https://www.nan-demo.work/image/sample05.jpg" alt="Thumbnail 3"></li>
</ul>

CSSの記述

CSSは適宜変更してください。

CSS
img {
  width:100%;
}

#mainImage {
  width:100%;
}

#thumbnailWrap{
  display: flex;
  padding: 0;
  width:100%;
}

#thumbnailWrap li {
  width:20%;
  list-style: none;
}

#thumbnailWrap li img {
  filter: brightness(0.3);
}

#thumbnailWrap li img.current {
  filter: brightness(1);
}

JavaScriptの記述

JavaScript
// サムネイル画像をクリックしたときの処理
document.querySelectorAll('.thumbnail').forEach(thumbnail => {
  thumbnail.addEventListener('click', () => {
    // メイン画像をサムネイル画像の src に切り替える
    document.getElementById('mainImage').src = thumbnail.src;

    // すべてのサムネイル画像から "current" クラスを削除する
    document.querySelectorAll('.thumbnail').forEach(thumbnail => {
      thumbnail.classList.remove('current');
    });

    // クリックされたサムネイル画像に "current" クラスを追加する
    thumbnail.classList.add('current');
  });
});