【jQuery】サムネイルをクリックしてメイン画像を切り替える方法【枠線の変更方法も解説】

<div class="container">
  <!-- メイン画像 -->
  <div class="main-img js-main-img">
    <img src="画像パス1" alt="" />
  </div>
  <!-- サムネイル画像 -->
  <ul class="sub-img js-sub-img">
    <!-- 選択されている画像の枠線を変更 -->
    <li class="current">
      <img src="画像パス1" alt="" />
    </li>
    <li>
      <img src="画像パス2" alt="" />
    </li>
    <li>
      <img src="画像パス3" alt="" />
    </li>
  </ul>
</div>

$(function () {
  $(".js-sub-img img").on("click", function () {
    // メイン画像に切り替えるimgのsrc取得
    img = $(this).attr("src");
    // currentクラス付け替え(枠線などを変えたい時に)
    $(".js-sub-img li").removeClass("current");
    $(this).parent().addClass("current");
    // fadeOutできたらsrc変更してfadeIn
    $(".js-main-img img").fadeOut(500, function () {
      $(".js-main-img img")
        .attr("src", img)
        .on("load", function () {
          $(this).fadeIn(500);
        });
    });
  });
});

/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
  border: 2px solid red;
  transition: border .5s;
}
/* レイアウトのためのスタイル */
.container {
  margin: 50px auto 0;
  max-width: 500px;
}
.main-img {
  height: 334px;
  width: 100%;
}
.main-img img {
  height: auto;
  width: 100%;
}
.sub-img {
  display: flex;
  margin-top: 10px;
}
.sub-img li {
  margin-right: 2%;
  width: calc(96% / 3);
}
.sub-img li:nth-child(3n) {
  margin-right: 0;
}
.sub-img li img {
  border: 2px solid transparent;
  transition: border .5s;
}
.sub-img img {
  cursor: pointer;
  width: 100%;
}