ページが開いたら0.5秒かけて9枚の画像を同じ場所で1枚ずつ表示させる指示

2023-07-22

<div id="image-container">
  <img src="#" alt="Image">
</div>
<style>
#image-container {
  width: 100%;
  text-align: center;
}
</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.style.display = 'block';

      counter++;

      setTimeout(showNextImage, 500);
    }
  }

  showNextImage();
});
</script>