js+css图片上下滚动

<div class="scroll-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.scroll-container {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.scroll-container img {
  width: 100%;
  height: auto;
  position: absolute;
  transition: top 1s ease-in-out;
}

const images = document.querySelectorAll('.scroll-container img');
let currentIndex = 0;

function scrollImages() {
  images.forEach((img, index) => {
    if (index !== currentIndex) {
      img.style.top = '300px';
    }
  });
  images[currentIndex].style.top = '0';
  currentIndex = (currentIndex + 1) % images.length;
}

setInterval(scrollImages, 2000);