用js实现无缝滚动

最新推荐文章于 2025-08-11 17:50:11 发布

居十四

最新推荐文章于 2025-08-11 17:50:11 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

文章标签： js 滚动播放

本文链接：https://blog.youkuaiyun.com/qq_34120430/article/details/81046366

本文介绍了如何使用JavaScript实现一个简单的无缝滚动效果。在实现过程中，需要注意三点：1) style.left只能获取行间样式，因此需要预先赋值；2) 通过在最后一张图片到达边界时将第一张图片放回起点，实现循环滚动；3) 图片所在的li元素需设置明确的width和height，以避免继承父元素的尺寸。示例代码中需修改图片路径。

这些天,都在学js.于是想模仿做一个简单的滚动.

虽然比较简单,但也有一些注意事项.

1.通过style.left只能获得行间样式.所以直接使用是得不到值的.所以要先赋值.

2.想要做出循环的效果,可以在最后的图片运动到边界时,将第一张图片再放到起点.这样就有了循环的效果.

3.注意li的css中要写width和height,否者会同parent的width和height一致

下面的代码,注意改一下img路径

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>my 无缝滚动</title>
	<style type="text/css">		
		*{margin: 0px;padding: 0px;}
		#box{width: 712px;height: 108px;overflow: hidden;position: relative;margin: 100px;background: red;}
		#box ul{position: absolute;left: 0px;right: 0px;}
		#box ul li{float: left; list-style:none;width:178px; height:108px;}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li><img src="images/1.jpg" alt=""></li>
			<li><img src="images/2.jpg" alt=""></li>
			<li><img src="images/3.jpg" alt=""></li>
			<li><img src="images/4.jpg" alt=""></li>
		</ul>
	</div>
</body>
</html>

<script type="text/javascript">
	var box = document.getElementById("box");
	var ul = box.getElementsByTagName("ul")[0];
	var lis = ul.getElementsByTagName("li");
	var speed = 2;
	
	ul.innerHTML += ul.innerHTML;
	ul.style.width = lis.length*lis[0].offsetWidth+'px';

	function move (){
		//这里需要对ul.style.left 进行处理 
		if(ul.offsetLeft < -ul.offsetWidth/2){
			ul.style.left = '0';
		}
		if(ul.offsetLeft>=0){
			ul.style.left = -ul.offsetWidth/2+'px';
		}
		
		ul.style.left = ul.offsetLeft + speed + 'px';
	}

	var timer = setInterval(move,30);

	box.onmouseover = function () {
		console.log('mouserover');
		clearInterval(timer);
	}

	box.onmouseout = function () {
		timer = setInterval(move,30);
	}

</script>