使用scrolltop值的递增配合setInterval与setTimeout实现相关效果，左右无缝滚动使用scrollLeft即可
Dom内容
<div id="container"> ???????????<ul id="con1"> ???????????????<li>javascript1</li> ???????????????<li>javascript2</li> ???????????????<li>javascript3</li> ???????????????<li>javascript4</li> ???????????????<li>javascript5</li> ???????????????<li>javascript6</li> ???????????????<li>javascript7</li> ???????????</ul> ???????</div>css内容
#container{width:400px;height:24px;margin:0 auto;border:1px solid red;overflow: hidden;} ???????????ul{list-style: none;padding:0;margin:0} ???????????ul li{height:24px;line-height: 24px;}js相关内容
<script type="text/javascript"> ???????var c=document.getElementById("container"); ???????var con1=document.getElementById("con1"); ???????con1.innerHTML+=con1.innerHTML; ?//把自身的内容变为原来的2倍 ???????// timer,t; ???????var iHeight=24; ???????var d=1000; ???????var speed=50; ???????function sTop(){ ???????????if(c.scrollTop%iHeight==0){//如果卷去的距离能够除尽一行的高度 ???????????????clearInterval(timer);//把定时器清除 ?????????????????t=setTimeout(startMove,d);//延迟1s后继续触发定时器 ???????????} ???????????if(c.scrollTop>=con1.scrollHeight/2){ ?//如果卷去的高度>=整个ul高度的一半时 ???????????????c.scrollTop=0; ???????????????c.scrollTop=c.scrollTop-con1.scrollHeight/2; //让ul回到原点 ?即c.scrollTop=0 ???????????}else{ ???????????????c.scrollTop++; ?//如若不然，继续往上滚动 ???????????} ???????} ???????function startMove(){ ???????????c.scrollTop++; ???????????timer=setInterval(sTop,speed); ???????} ???????startMove(); ???????c.onmouseover=function(){ ???????????clearInterval(timer); ???????????clearTimeout(t); ???????} ???????c.onmouseout=function(){ ???????????timer=setInterval(sTop,speed); ???????} ???</script>js文字的无缝滚动（上下）
原文地址：https://www.cnblogs.com/Sarah119/p/9395008.html