js 图片滚动效果

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

.scrolling-wrapper {
    width: 100%;
    overflow: hidden;
}

.scrolling-content {
    display: flex;
    animation: scroll 10s linear infinite;
}

.scrolling-content img {
    width: 200px; /* 图片宽度 */
    margin-right: 20px; /* 图片间距 */
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

const scrollingContent = document.querySelector('.scrolling-content');
let position = 0;

function scrollImages() {
    position -= 1; // 每次移动的距离
    if (position <= -100) { // 当图片完全移出视图时重置位置
        position = 0;
    }
    scrollingContent.style.transform = `translateX(${position}%)`;
}

setInterval(scrollImages, 20); // 每20毫秒移动一次