ページが開いたら1枚ずつ横に9枚の画像を並べていき、1秒かけてすべて表示させる指示を書いてください。

2023-07-22

<div id="image-container">
  <img src="画像1のURL" alt="Image 1">
  <img src="画像2のURL" alt="Image 2">
  <img src="画像3のURL" alt="Image 3">
  <img src="画像4のURL" alt="Image 4">
  <img src="画像5のURL" alt="Image 5">
  <img src="画像6のURL" alt="Image 6">
  <img src="画像7のURL" alt="Image 7">
  <img src="画像8のURL" alt="Image 8">
  <img src="画像9のURL" alt="Image 9">
</div>
<style>
#image-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

#image-container img {
  max-width: calc(100% / 9);
  height: auto;
  opacity: 0;
  transition: opacity 3s ease-in-out;
}

#image-container img.active {
  opacity: 1;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
  var container = document.getElementById('image-container');
  var images = container.querySelectorAll('img');
  var counter = 0;

  function showNextImage() {
    if (counter < images.length) {
      images[counter].classList.add('active');

      counter++;

      setTimeout(function () {
        showNextImage();
      }, 1000);
    }
  }

  showNextImage();
});
</script>