javascript 一定時間ごとに画像を切り替える

作成日 2021.04.08
更新日 2022.08.13
javascript
javascript

javascriptで、一定時間ごとに画像を切り替えるサンプルコードを掲載してます。ブラウザはchromeを使用しています。

1. 環境
2. 画像切り替え
3. 画像が存在しない場合
4. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 104.0.5112.81

Javascript サンプル集はこちら

画像切り替え

「img」タグの「src」を操作して、画像を切り替えます。
これを、一定時間ごとに切り替えるには「setTimeout」で実行時間を指定します。
※画像はコードの直下に用意して、配列でパスを指定してます。

<img id="pic" src="hoge.jpg" width="200" height="200">

<script>

'use strict';

const img = ["hoge.jpg", "foo.jpg", "bar.jpg"];

let count = -1;

picChange(); // 関数を実行

function picChange() {

  count++;

  // カウントが最大になれば配列を初期値に戻すため「0」を指定する
  if (count == img.length) count = 0;

  // 画像選択
  document.getElementById("pic").src = img[count];

  // 1秒ごとに実行
  setTimeout("picChange()", 1000);

}

</script>

use strictについてはこちら

実行結果を確認すると画像が、1秒毎に切り替わっていることが確認できます。

画像が存在しない場合

画像が存在しない場合に、何かしらの処理を行いたい場合は「error」イベントを使用します。

<img id="pic" src="hoge.png" width="200" height="200">

<script>

'use strict';

const img = ["hoge.png", "no.png", "bar.png"];

let count = -1;

picChange(); // 関数を実行

function picChange() {

    count++;

    // カウントが最大になれば配列を初期値に戻すため「0」を指定する
    if (count == img.length) count = 0;

    // 画像選択
    document.getElementById("pic").src = img[count];

    // 1秒ごとに実行
    setTimeout("picChange()", 1000);

}

document.getElementById("pic").addEventListener("error", function(){
    // 画像が存在しなかった場合の処理
    document.getElementById("pic").src = 'noimage.png';
});

</script>

実行結果

画像が存在しなければエラーを表示する

サンプルコード

以下は、3つの画像を
画像を1秒毎に、切り替えるサンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>

<script>

  const img = ["hoge.jpg", "foo.jpg", "bar.jpg"];

  let count = -1;

  const hoge = () => {
    count++;
    // カウントが最大になれば初期値に戻す
    if (count == img.length) count = 0;
    //画像選択
    pic.src = img[count];
    //1秒ごとに実行    
    setTimeout(() => { hoge(); }, 1000);
  }

  window.onload = () => {

    hoge();

  }

</script>

<body>
  <div class="container mx-auto my-56 w-64 px-4">

    <div id="sample" class="flex flex-col justify-center">

      <img id="pic" class="object-contain w-full" src="hoge.jpg">

    </div>

  </div>
</body>

</html>

画像が切り替わることが確認できます。