JavaScriptでの画像切り替えを完全ガイド！10選サンプルコードで簡単マスター

はじめに
●JavaScriptでの画像切り替えとは
●画像切り替えの基本的な使い方
- ○サンプルコード1：画像クリックで切り替え
- ○サンプルコード2：ボタンクリックで切り替え
●応用例：画像切り替えを利用したプロジェクト
●カスタマイズ方法
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptで画像切り替えを簡単に実装できるようになります。

初心者でも分かりやすい徹底解説で、画像切り替えの使い方、対処法、注意点、カスタマイズ方法を学べます。

10選のサンプルコード付きで、あなたもプロのように画像を切り替えられるようになります。

●JavaScriptでの画像切り替えとは

JavaScriptを使って、画像を切り替えることができます。

これにより、ウェブページ上で画像を動的に切り替えたり、アニメーションのような効果を実現できます。

●画像切り替えの基本的な使い方

JavaScriptで画像切り替えを行う際の基本的な使い方を解説します。

ここでは、画像クリックで切り替える方法と、ボタンクリックで切り替える方法を紹介します。

○サンプルコード1：画像クリックで切り替え

下記のサンプルコードでは、画像をクリックすることで別の画像に切り替える方法を示しています。

HTML内の<img>タグにonclick属性を設定し、JavaScript関数を実行するように指定しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画像クリックで切り替え</title>
</head>
<body>
  <img src="image1.jpg" onclick="switchImage(this)" alt="画像1">

  <script>
    function switchImage(img) {
      // 画像を切り替える処理
      if (img.src.match(/image1\.jpg/)) {
        img.src = "image2.jpg";
      } else {
        img.src = "image1.jpg";
      }
    }
  </script>
</body>
</html>

○サンプルコード2：ボタンクリックで切り替え

下記のサンプルコードでは、ボタンをクリックすることで画像が切り替わる方法を示しています。

<button>タグにonclick属性を設定し、画像切り替え用のJavaScript関数を呼び出すようにしています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ボタンクリックで切り替え</title>
</head>
<body>
  <img id="myImage" src="image1.jpg" alt="画像1">
  <button onclick="switchImage()">画像切り替え</button>

  <script>
    function switchImage() {
      // 画像を切り替える処理
      const img = document.getElementById("myImage");
      if (img.src.match(/image1\.jpg/)) {
        img.src = "image2.jpg";
      } else {
        img.src = "image1.jpg";
      }
    }
  </script>
</body>
</html>

●応用例：画像切り替えを利用したプロジェクト

JavaScriptの画像切り替え機能を応用したプロジェクト例を紹介します。

画像スライドショー、画像ギャラリー、画像タブ切り替えの3つの応用例をサンプルコード付きで解説します。

○サンプルコード3：画像スライドショー

下記のサンプルコードでは、複数の画像が一定の間隔で自動的に切り替わるスライドショーを実現しています。

setInterval関数を使用して一定時間ごとに画像切り替え関数を実行します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画像スライドショー</title>
  <style>
    #slideshow {
      position: relative;
      width: 400px;
      height: 300px;
      overflow: hidden;
    }
    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s;
    }
    .visible {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div id="slideshow">
    <img class="slide visible" src="image1.jpg" alt="画像1">
    <img class="slide" src="image2.jpg" alt="画像2">
    <img class="slide" src="image3.jpg" alt="画像3">
  </div>

  <script>
    let current = 0;
    const slides = document.querySelectorAll(".slide");
    setInterval(() => {
      // 現在の画像を非表示にする
      slides[current].classList.remove("visible");
      // 次の画像に切り替える
      current = (current + 1) % slides.length;
      slides[current].classList.add("visible");
    }, 3000);
  </script>
</body>
</html>

○サンプルコード4：画像ギャラリー

下記のサンプルコードでは、画像のサムネイルをクリックすると、その画像が拡大表示される画像ギャラリーを実現しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画像ギャラリー</title>
  <style>
    .thumbnail {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }
    #preview {
      width: 400px;
      height: 300px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <img class="thumbnail" src="image1.jpg" alt="画像1" onclick="showImage(this.src)">
  <img class="thumbnail" src="image2.jpg" alt="画像2" onclick="showImage(this.src)">
  <img class="thumbnail" src="image3.jpg" alt="画像3" onclick="showImage(this.src)">
  <div id="preview"></div>

  <script>
    function showImage(src) {
      const preview = document.getElementById("preview");
      preview.style.backgroundImage = `url(${src})`;
    }
  </script>
</body>
</html>

○サンプルコード5：画像タブ切り替え

下記のサンプルコードでは、タブをクリックすることで関連する画像が表示されるタブ切り替え機能を実現しています。

タブにはdata-img属性で関連する画像のURLを設定しており、タブがクリックされるとそのURLを元に画像を表示します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画像タブ切り替え</title>
  <style>
    .tab {
      display: inline-block;
      padding: 10px;
      border: 1px solid black;
      cursor: pointer;
    }
    #image-display {
      width: 400px;
      height: 300px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="tab" data-img="image1.jpg" onclick="switchImage(this)">画像1</div>
  <div class="tab" data-img="image2.jpg" onclick="switchImage(this)">画像2</div>
  <div class="tab" data-img="image3.jpg" onclick="switchImage(this)">画像3</div>
  <div id="image-display"></div>

  <script>
    function switchImage(tab) {
      const imgUrl = tab.dataset.img;
      const imageDisplay = document.getElementById("image-display");
      imageDisplay.style.backgroundImage = `url(${imgUrl})`;
    }
  </script>
</body>
</html>

●カスタマイズ方法

○サンプルコード6：画像切り替えエフェクト

画像切り替え時にエフェクトを追加する方法です。

ここでは、CSSのtransitionプロパティを使用してフェードイン・フェードアウトのエフェクトを実現しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画像切り替えエフェクト</title>
  <style>
    #image-display {
      position: relative;
      width: 400px;
      height: 300px;
      overflow: hidden;
    }
    .image {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s;
    }
    .visible {
      opacity: 1;
    }
  </style>
</head>
<body>
  <button onclick="switchImage()">画像切り替え</button>
  <div id="image-display">
    <img class="image visible" src="image1.jpg" alt="画像1">
    <img class="image" src="image2.jpg" alt="画像2">
  </div>

  <script>
    let current = 0;
    const images = document.querySelectorAll(".image");
    function switchImage() {
      images[current].classList.remove("visible");
      current = (current + 1) % images.length;
      images[current].classList.add("visible");
    }
  </script>
</body>
</html>

○サンプルコード7：切り替え画像のリサイズ

画像切り替え時に、画像のサイズを動的に変更する方法です。

ここでは、JavaScriptでwidthとheight属性を操作して、画像のサイズを変更しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>切り替え画像のリサイズ</title>
  <style>
    #image-display {
      width: 400px;
      height: 300px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <button onclick="switchImage()">画像切り替え</button>
  <img id="image-display" src="image1.jpg" alt="画像1">

  <script>
    const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
    let current = 0;
    const imageDisplay = document.getElementById("image-display");

    function switchImage() {
      current = (current + 1) % images.length;
      imageDisplay.src = images[current];
      imageDisplay.width = 400 + current * 50;
      imageDisplay.height = 300 + current * 50;
    }
  </script>
</body>
</html>

○サンプルコード8：画像切り替えのタイミング調整

画像の切り替えタイミングを調整する方法です。

ここでは、JavaScriptのsetTimeout関数を使用して、指定した時間が経過した後に画像が切り替わるようにしています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画像切り替えのタイミング調整</title>
  <style>
    #image-display {
      width: 400px;
      height: 300px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <button onclick="startSwitching()">画像切り替え開始</button>
  <img id="image-display" src="image1.jpg" alt="画像1">

  <script>
    const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
    let current = 0;
    const imageDisplay = document.getElementById("image-display");
    let timeoutId;

    function startSwitching() {
      clearTimeout(timeoutId);
      switchImage();
    }

    function switchImage() {
      current = (current + 1) % images.length;
      imageDisplay.src = images[current];
      timeoutId = setTimeout(switchImage, 3000); // 画像切り替えの間隔を3秒に設定
    }
  </script>
</body>
</html>

●注意点と対処法

画像切り替えを実装する際には、次のような注意点があります。それぞれの対処法も紹介します。

画像読み込みの遅延による表示のずれ
- 対処法
  事前に画像をプリロードしておくことで、遅延による表示のずれを防ぐことができます。
  また、遅延に対応したコードを実装することも有効です。
大量の画像を扱う際のパフォーマンス低下
- 対処法
  画像を適切なサイズにリサイズし、最適化して軽量化することで、パフォーマンス低下を抑えることができます。
  また、必要に応じて画像の読み込みを遅延させる（lazy loading）技術を利用しましょう。
レスポンシブデザインへの対応
- 対処法
  CSSメディアクエリを利用して、デバイスや画面サイズに応じたスタイルを適用することで、レスポンシブデザインに対応できます。
複数のブラウザでの動作確認
- 対処法
  主要なブラウザ（Chrome, Firefox, Safari, Edge など）で動作確認を行い、問題がないことを確認しましょう。
  また、必要に応じてブラウザごとの対応やポリフィルを利用して互換性を確保します。