不间断向左滚动js

要实现一个不间断向左滚动的 JavaScript 效果，可以使用 CSS 动画结合 JavaScript 来完成。以下是一个简单的示例：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Left Scrolling</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scrolling-container">
        <div class="scrolling-content">
            <span>Content 1</span>
            <span>Content 2</span>
            <span>Content 3</span>
            <span>Content 4</span>
            <span>Content 5</span>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式 (styles.css)

.scrolling-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.scrolling-content {
    display: inline-block;
    padding-left: 100%;
    animation: leftScroll 10s linear infinite;
}

.scrolling-content span {
    display: inline-block;
    padding-right: 50px;
}

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

JavaScript (script.js)

// 这里可以添加一些动态内容更新或控制动画的逻辑

解释

HTML 结构：创建一个包含滚动内容的容器。
CSS 样式：
- .scrolling-container：设置为 overflow: hidden 以隐藏超出容器的内容，并使用 white-space: nowrap 防止内容换行。
- .scrolling-content：使用 animation 属性应用 CSS 动画 leftScroll，该动画将持续 10 秒并无限循环。
- @keyframes leftScroll：定义动画的关键帧，从初始位置 translateX(0) 移动到 -100%，实现向左滚动的效果。