JS自动滚动图片内容代码，JS无缝滚动只滚动两次就自动停止了是什么原因，怎么解决？

网站开发知识蜗牛SEO 4年前 (2020-12-21) 3045℃ 喜欢 (0)

直接复制下方代码代到html文件保存，执行即可实现“JS自动无缝滚动图片内容”

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="colee" style="overflow:hidden;height:100px;width:410px;border:1px solid red;">
	<div id="colee1">
		<p>woniuseo.com</p>
		<p>www.woniuseo.com</p>
		<p>woniuseo.cn</p>
		<p>www.woniuseo.cn</p>
		<p>蜗牛网站优化网站建设</p>
	</div>
	<div id="colee2"></div>
</div>
<script type="text/javascript">
	//速度设置
	var speed=10;
	var colee2=document.getElementById("colee2");
	var colee1=document.getElementById("colee1");
	var colee=document.getElementById("colee");
	colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
	function Marquee1(){
	//当滚动至colee1与colee2交界时
	if(colee2.offsetTop-colee.scrollTop<=0){
	 colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
	 }else{
	 colee.scrollTop++
	}
	}
	var MyMar1=setInterval(Marquee1,speed)//设置定时器
	//鼠标移上时清除定时器达到滚动停止的目的
	colee.onmouseover=function() {clearInterval(MyMar1)}
	//鼠标移开时重设定时器
	colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
</body>
</html>

在实际项目应用过程当中，会可能会出现滚动执行成功，但是最终滚动只执行了一两次的情况发生，如果发生此种情况，按如下步骤即可处理成功。