【前端】实现图片无缝滚动·教程

一颗不甘坠落的流星

已于 2024-02-19 15:25:54 修改

阅读量882

点赞数 1

分类专栏：工作随记文章标签： js 无缝滚动图片滚动

于 2021-02-04 09:30:26 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/113624107

版权

工作随记专栏收录该内容

70 篇文章 3 订阅

订阅专栏

文章目录

效果图：

在这里插入图片描述

需求分析：

实现无缝滚动

源代码：

HTML部分

<div id="box">
	<ul id="u">
		<li><img src="a.jpg" alt="" /></li>
		<li><img src="b.jpg" alt="" /></li>
		<li><img src="c.jpg" alt="" /></li>
		<li><img src="d.jpg" alt="" /></li>
		<!-- 思路:克隆所有的li放在最后一个li的后面 -->
		<li><img src="a.jpg" alt="" /></li>
		<li><img src="b.jpg" alt="" /></li>
		<li><img src="c.jpg" alt="" /></li>
		<li><img src="d.jpg" alt="" /></li>
	</ul>
</div>

css部分

<style>
  *{
	margin:0;
	padding:0;
}
div{
	width:600px;
	height:200px;
	position:relative;
	border:1px solid red;
	margin:100px;
	overflow:hidden;
}
ul{
	width:600%;
	position:absolute;
	left:0;
}
li{
	float:left;
	list-style:none;
}  
</style>

JavaScript部分

为了简化代码，先封装一些常用的自定义构造函数

<script>
    //无
</script>

js主体部分，需要用到封装的函数，调用即可

<script>
var ul = document.getElementById('u');
// 通过定位来移动ul位置，每隔一段时间ul的left增加-2
setInterval(function(){
	//图片width=300px，4张图片总width=1200px
	if(ul.offsetLeft<=-1200){//当向左移动过的图片总width超过1200px
		ul.style.left = 0;//闪回第一张图片，从新开始
	}else{
		ul.style.left = (ul.offsetLeft - 2)+'px';//ul的left增加-2，即向左移动2px
	}
},20)
</script>

总代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
	}

	div {
		width: 600px;
		height: 200px;
		position: relative;
		border: 1px solid red;
		margin: 100px;
		overflow: hidden;
	}

	ul {
		width: 600%;
		position: absolute;
		left: 0;
	}

	li {
		float: left;
		list-style: none;
	}
</style>

<body>
	<div id="box">
		<ul id="u">
			<li><img src="a.jpg" alt="" /></li>
			<li><img src="b.jpg" alt="" /></li>
			<li><img src="c.jpg" alt="" /></li>
			<li><img src="d.jpg" alt="" /></li>
			<!-- 思路:克隆所有的li放在最后一个li的后面 -->
			<li><img src="a.jpg" alt="" /></li>
			<li><img src="b.jpg" alt="" /></li>
			<li><img src="c.jpg" alt="" /></li>
			<li><img src="d.jpg" alt="" /></li>
		</ul>
	</div>
	<script>
		var ul = document.getElementById('u');
		// 通过定位来移动ul位置，每隔一段时间ul的left增加-2
		setInterval(function () {
			//图片width=300px，4张图片总width=1200px
			if (ul.offsetLeft <= -1200) {//当向左移动过的图片总width超过1200px
				ul.style.left = 0;//闪回第一张图片，从新开始
			} else {
				ul.style.left = (ul.offsetLeft - 2) + 'px';//ul的left增加-2，即向左移动2px
			}
		}, 20)
	
	</script>
</body>

</html>