【JavaScript】スライドショーで複数の画像を順番に表示してループさせる方法

ウェブサイトやアプリケーションで、複数の画像を順番に表示してループさせたい場合、JavaScriptを使用することが便利です。
この記事では、JavaScriptを使って画像をループさせる方法について解説します。
定期的に画像を切り替える方法を学び、魅力的な画像スライドショーを作成しましょう。

JavaScriptで画像をループさせる方法

以下の例を通じて、JavaScriptを使って画像をループさせる方法を紹介します。

HTML

<div id="image-container">
  <img src="image1.jpg" id="image">
</div>

JavaScript

// 画像のファイル名のリスト
const imageList = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

let currentIndex = 0;
const imageElement = document.getElementById('image');

// 画像を切り替える関数
function changeImage() {
  // 現在のインデックスを更新
  currentIndex = (currentIndex + 1) % imageList.length;
  // 画像のパスを次の画像に更新
  imageElement.src = imageList[currentIndex];
}

// 画像の切り替えを定期的に実行する
setInterval(changeImage, 3000); // 3000ミリ秒（3秒）ごとに切り替え

このコードでは、imageList配列に画像ファイル名のリストを定義し、currentIndex変数で現在表示されている画像のインデックスを管理します。changeImage()関数では、currentIndexを更新して次の画像のインデックスを決定し、それに基づいてimageElement.srcを更新して画像を切り替えます。そして、setInterval()関数を使用して定期的にchangeImage()関数を呼び出すことで、画像の切り替えをループさせています。

この方法を使えば、ウェブサイトやアプリケーションで動的で魅力的な画像スライドショーを実装することができます。

まとめ

setInterval()関数を使って定期的に画像を切り替えることで、簡単に画像スライドショーを実装できます。
是非、自分のサイトに応用してみてください。