下面前端入门建站教程为大家介绍一下纯js实现文字无缝滚动(亲测有效)

1、//html代码
<div class="scroll" id="scroll">
    <div id="scroll2">
        <ol id="data">
            //data从接口读取数据
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
            <li>123456778</li>
        </ol>
    </div>
</div>

2、//css控制整体高度
#scroll{width: 300px;height: 126px;overflow: hidden;}

3、//js代码
var myMarquee = '';  //设置定时器
function listScroll(){
    //文字滚动
    var scroll = document.getElementById("scroll");
    var scroll2 = document.getElementById("scroll2");
    //创建用于复制scroll2的新节点
    var newnode = document.createElement("div");
    newnode.id = "scroll3";
    scroll.appendChild(newnode);
    var scroll3 = document.getElementById("scroll3");
    var speed = 30;    //设置速度
    scroll3.innerHTML = scroll2.innerHTML;  //复制scroll2节点
    // 滚动函数
    function moveTop() {
        // 当main向上滚动超出部分>=滚动节点高度时, 设置为scrollTop为0
        if (scroll2.offsetHeight - scroll.scrollTop <= 0 ) {
            scroll.scrollTop = 0;
            // 或者main.scrollTop -= scroll2.offsetHeight;
        } else {
            scroll.scrollTop++;
        }
    }
    myMarquee = setInterval(moveTop, speed);  //设置定时器
    // 鼠标悬停时清除定时器停止滚动，移出后继续滚动
    scroll.onmouseover = function() {
        clearInterval(myMarquee);
    }
    scroll.onmouseout = function() {
          myMarquee = setInterval(moveTop, speed);
    }
    window.onresize = function(){
        console.log(document.body.clientHeight)
    }
}
listScroll()

//注意如果数据是要实时刷新的，需要添加clearInterval(myMarquee)清掉

上面是“纯js实现文字无缝滚动(亲测有效)”的全面内容，想了解更多关于 js 文章，请继续关注前端入门建站教程。