scrollLeft的相关问题（js横向无缝滚动）

最新推荐文章于 2024-07-31 20:07:54 发布

转载最新推荐文章于 2024-07-31 20:07:54 发布 · 396 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/diantao/p/4970094.html

本文介绍了一段使用JavaScript实现的简单无缝滚动代码。通过设置不同层的宽度和使用scrollLeft属性，可以实现在一个固定宽度的容器内图片的连续滚动效果。文章提供了完整的代码示例并强调了scrollLeft属性使用的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="demo">
	<div id="innerdemo">
		<div id="demo1">
			<img src="images/0.jpg" />
			<img src="images/1.jpg" />
			<img src="images/2.jpg" />
			<img src="images/3.jpg" />
			<img src="images/4.jpg" />
			<img src="images/5.jpg" />
		</div>
		<div id="demo2"></div>
	</div>
</div>

#demo{ width:600px; height:200px; border:1px solid #CCC; margin:20px auto; overflow:hidden;}
#innerdemo{ width:800%; }
#demo1,#demo2{float:left;}

function crossMarquee(){
	var speed=10;
	var oDemo=document.getElementById("demo");
	var oinnerDemo=document.getElementById("innerdemo");
	var oDemo1=document.getElementById("demo1");
	var oDemo2=document.getElementById("demo2");
	oDemo2.innerHTML=oDemo1.innerHTML;
	function Marquee(){
		if(oDemo1.offsetWidth<=oDemo.scrollLeft){
			oDemo.scrollLeft-=oDemo1.offsetWidth;
		}else{
			oDemo.scrollLeft++;
		}
	}
	var myMar=setInterval(Marquee,speed);
	oDemo.onmouseover=function(){clearInterval(myMar);}
	oDemo.onmouseout=function(){myMar=setInterval(Marquee,speed);}
}
window.onload=function(){
	crossMarquee()

};

这是一个简单的js无缝滚动代码，有个需要注意的地方

1、scrollLeft必须在最外层容器上执行

2、scrollLeft无需加单位px

转载于:https://www.cnblogs.com/diantao/p/4970094.html