js滚动播放信息函数

在JavaScript中，实现一个滚动播放信息的函数可以通过HTML和CSS来创建滚动效果，然后使用JavaScript来控制这个滚动的开始和结束。以下是一个简单的实现方法：

首先，我们需要在HTML中定义滚动的容器，并设置一些基本的样式来控制滚动效果：

<div id="scroll-box" style="width: 200px; height: 100px; overflow: hidden;">
    <div id="scroll-text" style="width: 100%; height: 100%; white-space: nowrap; line-height: 100px;">
        这里是要滚动显示的信息...
    </div>
</div>
<button onclick="startScroll()">开始滚动</button>
<button onclick="stopScroll()">停止滚动</button>

接着，我们可以编写JavaScript函数来控制滚动：

var scrollInterval;

function startScroll() {
    // 设置滚动速度，单位为毫秒
    var scrollSpeed = 30;
    // 获取滚动容器和滚动文本
    var box = document.getElementById('scroll-box');
    var text = document.getElementById('scroll-text');
    // 计算文本的宽度
    var textWidth = text.offsetWidth;
    // 清除之前的滚动
    clearInterval(scrollInterval);
    // 开始滚动
    scrollInterval = setInterval(function() {
        // 将文本向左移动，通过修改transform的translateX属性来实现
        text.style.transform = 'translateX(-' + (text.scrollLeft + scrollSpeed) + 'px)';
        // 当文本滚动到末尾时重新开始
        if(text.scrollLeft === textWidth - box.offsetWidth) {
            text.style.transform = 'translateX(0px)';
        }
    }, scrollSpeed);
}

function stopScroll() {
    // 清除滚动
    clearInterval(scrollInterval);
}

这个简单的例子展示了如何使用JavaScript来控制一个文本的左右滚动。你可以通过调整`scrollSpeed`变量来控制滚动的速度，以及修改`startScroll`函数中的逻辑来控制不同的滚动行为。