Webページにおける画像のスライドショー

HTML

<div id="images_container">
    <img class="images" id="show" src="./image_1.png" srcset="./image_1.png 1x, ./image_1_2x.png 2x" alt="画像 1">
    <img class="images" src="./image_2.png" srcset="./image_2.png 1x, ./image_2_2x.png 2x" alt="画像 2">
</div>

CSS

#images_container {
  position: relative;
}

.images {
  opacity: 0.00;
  transition: all 2s ease;  /* すべてのプロパティに対して、2秒間の緩急をつけたアニメーションを設定する（ここでは要素の透過と非透過が対象） */
}

.images:nth-child(2) {
  left: 0;
  position: absolute;
  top: 0;
}

#show {
  opacity: 1.00;
}

JavaScript

const images = document.getElementsByClassName("images");
let number = 0;

// 画像の切り替え関数
function changeTitleImage() {
  images[number].id = "";  // 透過する。
  number = (number + 1) % images.length;  // 計算により画像の切り替えとループが可能となる。
  images[number].id = "show";  // 非透過にする。
}

setInterval(changeTitleImage, 5000);  // 5秒間隔で画像を切り替える。