ページが開いたら5秒かけて9枚の画像を1枚ずつ表示させる指示を書いてください。

2023-07-22

<div id="image-container">
  <img src="#" alt="Image">
</div>
<style>
#image-container {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

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

#image-container img.active {
  opacity: 1;
}
</style>
<script>
#image-container img {
  max-width: 100%;
  height: auto;
  display: none;
}
document.addEventListener("DOMContentLoaded", function () {
  var imageUrls = [
    '画像1のURL',
    '画像2のURL',
    '画像3のURL',
    '画像4のURL',
    '画像5のURL',
    '画像6のURL',
    '画像7のURL',
    '画像8のURL',
    '画像9のURL'
  ];
 var container = document.getElementById('image-container');
  var imageElement = container.querySelector('img');
  var counter = 0;

  function showNextImage() {
    if (counter < imageUrls.length) {
      imageElement.src = imageUrls[counter];
      imageElement.classList.add('active');

      counter++;

      setTimeout(function () {
        imageElement.classList.remove('active');
        showNextImage();
      }, 3000);
    }
  }

  showNextImage();
});
</script>