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;
    white-space: nowrap;
}

.scrolling-content {
    display: inline-block;
    animation: scroll-left 15s linear infinite;
}

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

// 如果需要手动控制滚动，可以添加按钮和事件监听器
document.getElementById('scrollLeft').addEventListener('click', function() {
    document.querySelector('.scrolling-content').style.animationPlayState = 'paused';
    document.querySelector('.scrolling-content').scrollLeft -= 100;
});

document.getElementById('scrollRight').addEventListener('click', function() {
    document.querySelector('.scrolling-content').style.animationPlayState = 'paused';
    document.querySelector('.scrolling-content').scrollLeft += 100;
});