用js实现无缝滚动

最新推荐文章于 2024-04-05 21:12:09 发布

居十四

最新推荐文章于 2024-04-05 21:12:09 发布

阅读量1w

点赞数

文章标签： js 滚动播放

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

版权

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

最低0.47元/天解锁文章

居十四

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
用js实现无缝滚动

这些天,都在学js.于是想模仿做一个简单的滚动.虽然比较简单,但也有一些注意事项.1.通过style.left只能获得行间样式.所以直接使用是得不到值的.所以要先赋值.2.想要做出循环的效果,可以在最后的图片运动到边界时,将第一张图片再放到起点.这样就有了循环的效果.3.注意li的css中要写width和height,否者会同parent的width和height一致下面的代码,注意改一下img路...
复制链接

扫一扫