js+setInterval计数器的方式实现无缝滚动列表-CSDN博客

本文链接：https://blog.csdn.net/qq_38499671/article/details/109237708

之前整理过一篇类似的无缝滚动的插件《js实现无缝滚动》和《仿拼多多拼单向上无缝滚动》，都是类似的效果，列表无缝向上滚动，今天再记录一个笔记，觉得这个更适合纯文字列表的无缝滚动情况，例如：政府机构的滚动新闻列表，培训机构的考试时间列表... 废话不多逼叨，直接看效果，上代码！

css代码：

.scrollUp{overflow:hidden; height:80px; width:280px; margin:90px auto; position:relative;}
#scrolList{height:auto; text-align:left;}
#scrolBlack{height:auto; text-align:left;}
#scrolList li,#scrolBlack li{list-style-type:none; height:22px; text-align:left; }

html代码：

<div class="scrollUp">
<ul id="scrolList">
    <li><a href="#" target="_blank">wp/wordpress自定义小工具logo调用设置</a></li>
    <li><a href="#" target="_blank">wp/wordpress给文章图片自动添加alt和title信息</a></li>
    <li><a href="#" target="_blank">wp/wordpress新增文章点赞功能</a></li>
    <li><a href="#" target="_blank">wp/wordpress网站数据统计调用大全</a></li>
    <li><a href="#" target="_blank">Qui-Pure主题版本更新日志 </a></li>
    <li><a href="#" target="_blank">wp/wordpress去掉head文件不必要的引用</a></li>
    <li><a href="#" target="_blank">wp/wordpress文章页的上一篇/下一篇功能</a></li>
</ul>
<ul id="scrolBlack"></ul>
</div>

js代码：

var speed = 80;//速度越大，滚动越慢
window.onload=function(){
    var s_box=document.getElementsByClassName("scrollUp")[0];
    var s_list=document.getElementById("scrolList");
    var s_blank=document.getElementById("scrolBlack");
    s_blank.innerHTML = s_list.innerHTML;
    function Marquee(){
        if(s_box.scrollTop>=s_list.offsetHeight){
           s_box.scrollTop=0;
        }else{
           s_box.scrollTop=s_box.scrollTop+1;
        }
    }
    var MyMar=setInterval(Marquee,speed);
    s_box.onmouseover=function(){clearInterval(MyMar)};
    s_box.onmouseout=function(){MyMar=setInterval(Marquee,speed); };
}

使用比较简单，懂点前端基础都会用，不啰嗦了，拿去耍吧，记得把ul,li的初始样式去掉！

最后，推广一下我自己开发的wp主题:Qui-Pure，同时也在用，就是当前你看到的UI主题界面，主题永久免费，顶部菜单就可以下载！