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

网站开发知识 1323℃

直接复制下方代码代到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>



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

colee2.offsetTop-colee.scrollTop

把如上代码替换成如下代码,即可解决问题:

colee2.offsetHeight-colee.scrollTop

本文解决方案来自互联网,如有相关疑问,可添加本站交通QQ群:83392417  交通沟通解决。

转载请注明:⎛蜗牛SEO⎞ » JS自动滚动图片内容代码,JS无缝滚动只滚动两次就自动停止了是什么原因,怎么解决?

蜗牛营销是国内领先的搜索营销服务商,有丰富的客户服务经验,我们有专业的网站优化、网站建设、APP开发、全网营销团队,可以持续为您提供优质的服务,您的满意是我们不懈的追求。

城市分站:上海SEO北京SEO广州SEO深圳SEO网站建设武汉SEO重庆SEO成都SEO

业务范围:网站优化,网站建设,app开发,虚拟主机    微信:ganshangwoniu    QQ:549233124    业务咨询热线:177-2050-9380

   Copyright © 2008-2023 蜗牛营销版权所有   

QQ在线咨询
上海SEO蜗牛营销微信号