【JavaScript】ふわっと切り替わる画像

2024年12月1日

この記事では、JavaScriptのsetIntervalを使って指定した時間ごとに画像をふわっと切り替えるプログラミングコードを解説していきます。

リンク

完成形

最初に完成形を見ていきます。

３枚の画像がふわっと切り替わっています。

See the Pen js-03 by aqua (@aqua-programdiary) on CodePen.

HTMLコーディング

まずは、HTMLのコーディングをしていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>

  <img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" class="active">
  <img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image2.jpg">
  <img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image3.jpg">

<script src="main.js"></script>
</body>
</html>

img 要素:
- 各画像が src 属性を持つ img 要素として表示されています。
- 一番最初の画像には class="active" が追加されており、表示されている画像を示しています。
<script> タグ:
- main.js スクリプトが読み込まれています。このスクリプトで画像のスライドショーを制御します。

CSSコーディング

次に、CSSのコーディングをしていきます。

@charset "utf-8";

img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 2s ease;
  max-width: 300px;
}

img.active {
  opacity: 1;
}

img 要素の共通スタイル:
- position: absolute;: 画像を絶対位置で配置します。
- top: 0; left: 0;: 画像をページの左上に配置します。
- opacity: 0;: 画像の透明度を初期値 0 に設定し、非表示にします。
- transition: all 2s ease;: すべてのプロパティに2秒のトランジション（アニメーション）を設定し、緩やかなイージングで変化します。
- max-width: 300px;: 画像の最大幅を300ピクセルに制限します。
.active クラスのスタイル:
- opacity: 1;: .active クラスを持つ画像の透明度を1に設定し、表示されるようにします。

JavaScriptコーディング

最後にJavaScriptのコーディングをして完成です。

const images = document.querySelectorAll('img');
let number = 0;

function changeImage() {
  images[number].classList.remove('active');
  number = (number + 1) % images.length;
  images[number].classList.add('active');
}

setInterval(changeImage, 4000);

const images = document.querySelectorAll('img');
- HTML内のすべての img 要素を取得し、images 変数に格納します。
let number = 0;
- スライドショーで表示中の画像のインデックスを保持する変数です。
function changeImage() { ... }
- changeImage 関数は、スライドショーの画像を切り替えるためのロジックを含む関数です。
images[number].classList.remove('active');
- 現在表示中の画像から active クラスを削除します。これにより、画像が非表示になります。
number = (number + 1) % images.length;
- number 変数をインクリメントし、images.length で割った余りを新しい number に設定します。これにより、次の画像のインデックスが計算されます。ループするように設定されているため、最後の画像の次は最初の画像に戻ります。
images[number].classList.add('active');
- 新しい画像に active クラスを追加して、画像を表示します。
setInterval(changeImage, 4000);
- changeImage 関数を定期的に実行するために、setInterval 関数を使用します。この場合、4秒ごとに changeImage 関数が呼び出されます。