用js实现无缝滚动

最新推荐文章于 2024-07-20 13:48:02 发布

居十四

最新推荐文章于 2024-07-20 13:48:02 发布

阅读量1w

点赞数

文章标签： js 滚动播放

本文链接：https://blog.csdn.net/qq_34120430/article/details/81046366

版权

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

摘要由CSDN通过智能技术生成

这些天,都在学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>