js 横向滚动特效

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

.scroll-container {
    width: 100%;
    overflow-x: auto; /* 允许横向滚动 */
    white-space: nowrap; /* 防止内容换行 */
}

.scroll-content {
    display: inline-block; /* 允许内容在一行显示 */
}

.scroll-content img {
    width: 200px; /* 图片宽度 */
    height: auto;
    margin-right: 16px; /* 图片间距 */
}

window.onload = function() {
    const container = document.querySelector('.scroll-container');
    let scrollPosition = 0;
    const scrollSpeed = 2; // 调整滚动速度

    function scrollContent() {
        scrollPosition -= scrollSpeed;
        if (Math.abs(scrollPosition) > container.clientWidth) {
            scrollPosition = container.scrollWidth;
        }
        container.style.transform = `translateX(${scrollPosition}px)`;
        requestAnimationFrame(scrollContent);
    }

    scrollContent();
};