js图片向上滚动代码

<div id="scrollContainer">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多图片 -->
</div>

#scrollContainer {
    width: 100%;
    height: 200px; /* 设置容器高度 */
    overflow: hidden;
    position: relative;
}

#scrollContainer img {
    width: 100%;
    height: auto;
    position: absolute;
    transition: top 0.5s ease-in-out; /* 平滑过渡效果 */
}

const container = document.getElementById('scrollContainer');
const images = container.getElementsByTagName('img');
let currentIndex = 0;

function scrollImages() {
    // 将当前图片移出视图
    images[currentIndex].style.top = '-100%';
    
    // 更新索引
    currentIndex = (currentIndex + 1) % images.length;
    
    // 将下一张图片移入视图
    images[currentIndex].style.top = '0';
}

// 初始化第一张图片的位置
images[currentIndex].style.top = '0';

// 设置定时器，每隔一段时间滚动一次
setInterval(scrollImages, 3000); // 每3秒滚动一次