js产品图片无缝滚动代码

要实现产品图片的无缝滚动效果，可以使用JavaScript结合CSS来完成。以下是一个基础的示例代码，展示了如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝滚动图片</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scroll-container">
        <ul class="scroll-list">
            <li><img src="image1.jpg" alt="Image 1"></li>
            <li><img src="image2.jpg" alt="Image 2"></li>
            <li><img src="image3.jpg" alt="Image 3"></li>
            <li><img src="image4.jpg" alt="Image 4"></li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.scroll-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.scroll-list {
    white-space: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
}

.scroll-list li {
    display: inline-block;
    margin-right: 20px;
}

.scroll-list img {
    width: 100px; /* 根据需要调整图片大小 */
    height: auto;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const scrollList = document.querySelector('.scroll-list');
    const listItems = scrollList.querySelectorAll('li');
    let currentIndex = 0;

    function scrollImages() {
        scrollList.style.left = `-${currentIndex * 120}px`; // 120px 是每个图片项的宽度加上margin
        currentIndex++;
        if (currentIndex >= listItems.length) {
            setTimeout(() => {
                scrollList.style.transition = 'none';
                currentIndex = 0;
                scrollList.style.left = '0';
                setTimeout(() => {
                    scrollList.style.transition = 'left 0.5s ease-in-out';
                }, 50);
            }, 500); // 500ms 是动画持续时间
        }
    }

    setInterval(scrollImages, 2000); // 每2秒滚动一次
});