循环滚动js特效代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环滚动特效</title>
    <style>
        #scrollContainer {
            width: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
        }
        #scrollContent {
            display: flex;
            animation: scroll 10s linear infinite;
        }
        .scrollItem {
            min-width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #f0f0f0;
            border-right: 1px solid #ccc;
        }
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <div id="scrollContainer">
        <div id="scrollContent">
            <div class="scrollItem">Item 1</div>
            <div class="scrollItem">Item 2</div>
            <div class="scrollItem">Item 3</div>
            <div class="scrollItem">Item 4</div>
            <div class="scrollItem">Item 5</div>
        </div>
    </div>

    <script>
        const container = document.getElementById('scrollContainer');
        const content = document.getElementById('scrollContent');
        const itemWidth = document.querySelector('.scrollItem').offsetWidth;

        // 复制内容以实现无缝循环
        content.innerHTML += content.innerHTML;

        function startScroll() {
            let position = 0;
            setInterval(() => {
                position -= 1;
                content.style.transform = `translateX(${position}px)`;
                if (Math.abs(position) >= itemWidth * content.children.length / 2) {
                    position = 0;
                }
            }, 50);
        }

        startScroll();
    </script>
</body>
</html>