【javascript】イメージスライダー、画像をフワッと切り替え、ちょっと拡大させる

やりたいこと

HTML

<div class="top">
  <img src="画像のURL" class="active" />
  <img src="画像のURL" />
  <img src="画像のURL" />
</div>

CSS

.top{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 親要素からはみ出したものを非表示 */
}
.top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  opacity: 0; /* 非表示 */
  z-index: 10;
  transition: opacity 1.2s ease;
}
.top img.active {
  opacity: 1; /* クラスactiveが付与されたら表示 */
  z-index: 100;
  animation: ani 10s; /* アニメーション */
}

@keyframes ani {
  100% {
    scale: 108%;  /* 10sかけて拡大 */
  }
}

javaScript

const img = document.querySelectorAll(".top img"); // 画像を取得

let cnt = 1; // カウンターは最初1に設定

function slideImg() {
  for (let i = 0; i < img.length; i++) {
    if (i == cnt) {
      img[cnt].classList.add("active");
    } else {
      setTimeout(() => { // 1秒後にactiveを削除
        img[i].classList.remove("active");
      }, 1000);
    }
  }
  cnt++;
  if (cnt > 2) cnt = 0; // 画像枚数(3)-1=2
}
setInterval(slideImg, 4000); // 4秒ごとに切り替える

参考

【javascript】setIntervalと、それを停止させるclearIntervalの使い方

まとめ