js文字左右滚动代码

<div id="scrollContainer">
    <span id="scrollText">这是需要滚动的文字内容。</span>
</div>

#scrollContainer {
    width: 300px; /* 容器宽度 */
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 防止文字换行 */
}

#scrollText {
    display: inline-block; /* 使 span 元素可以应用左右移动的效果 */
}

function startScrolling() {
    const container = document.getElementById('scrollContainer');
    const text = document.getElementById('scrollText');
    let position = container.clientWidth; // 初始位置在容器最右侧

    function scrollText() {
        position--;
        text.style.transform = `translateX(${position}px)`;
        if (position <= -text.clientWidth) { // 当文字完全移出容器时
            position = container.clientWidth; // 重置位置到最右侧
        }
    }

    const scrollInterval = setInterval(scrollText, 20); // 每20毫秒滚动一次
}

window.onload = startScrolling; // 页面加载完成后开始滚动