【ソーコード】番外編：複数画像をホバーで切り替え

目次

※コーディングの解説はCSS、JavaScriptのコメントを参照

ディレクトリ構成

    
extra6
 ├─img
 │  ├─mainvisual1.jpg
 │  ├─mainvisual2.jpg
 │  ├─mainvisual3.jpg
 │  ├─mainvisual4.jpg
 │  └─mainvisual5.jpg
 │
 ├─css
 │  └─style.css
 │
 ├─js
 │  └─main.js
 │
 └─index.html

HTML（index.html）

別タブで開く 
index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
  </head>

  <body>
    <div class="content">
      <div id="mainvisual">
        <img src="img/mainvisual1.jpg" alt="">
      </div>
      <ul id="thumbnail">
        <li><img src="img/mainvisual1.jpg" alt=""></li>
        <li><img src="img/mainvisual2.jpg" alt=""></li>
        <li><img src="img/mainvisual3.jpg" alt=""></li>
        <li><img src="img/mainvisual4.jpg" alt=""></li>
        <li><img src="img/mainvisual5.jpg" alt=""></li>
      </ul>
    </div>
  </body>
</html>

CSS（style.css）

別タブで開く 
style.css

@charset "UTF-8";

html {
  font-size: 100%;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
ul {
  list-style: none;
}

.content {
  max-width: 1000px;
  padding: 0 20px;
  margin: 20px auto;
}

#mainvisual {
  padding: 10px;
}
#thumbnail {
  display: flex;
}
#thumbnail li {
  width: 20%;
  padding: 10px;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 600px) {
  .content {
    padding: 0 10px;
    margin: 10px auto;
  }

  #mainvisual {
    padding: 5px;
  }
  #thumbnail li {
    padding: 5px;
  }
}

JavaScript（main.js）

別タブで開く 
main.js

$(function(){
  /*=================================================
  画像切り替え
  ===================================================*/
  // サムネイルの画像をホバーした際の処理
  $('#thumbnail img').on('mouseover', function(){

    // ホバーされた画像のパスを取得
    // $(this)はイベントが発生した要素を指すため、1つ目のサムネイルがホバーされた際は1つ目のsrcを、
    // 2つ目のサムネイルがホバーされた際は2つ目のsrcを取得する
    let img_src = $(this).attr("src");

    // メイン画像と同じサムネイルがホバーされた際は画像切り替えを実行しない
    // （メイン画像のsrcとホバーされた画像のsrcが異なる場合のみ実行）
    if($('#mainvisual img').attr("src") != img_src) {

      // メイン画像を0.5秒かけてフェードアウトし、フェードアウトが完了したら
      // メイン画像のsrcをホバーされたサムネイルのsrcに変更して
      // メイン画像を0.5秒かけてフェードインする
      // ※「フェードアウトが完了した後に実行」のように、何かの処理が終わったあとに実行させたい場合は、
      // 今回のようのコールバック関数を使用します。詳しくは「コールバック関数」で調べてみてください
      $('#mainvisual img').fadeOut(500, function() {
        $("#mainvisual img").attr({src:img_src});
        $("#mainvisual img").fadeIn(500);
      })
    }
  });
});