利⽤间隔性定时器制作⽆缝滚动图⽚展示_利间隔定时器来实现图片动画-CSDN博客

本文链接：https://blog.csdn.net/weixin_44415461/article/details/100057999

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		#banner{
			position: relative;
			width: 600px;
			height: 150px;
			margin: 100px auto;
			overflow: hidden;
		}
		#banner ul{
			position: absolute;
			left: 0;
			top: 0;
		}
		#banner li{
			float: left;
			width: 200px;
			height: 150px;
			list-style: none;
		}
		#banner li img{
			width: 200px;
			height: 150px;
		}
	</style>
</head>
<body>
	<div id="banner">
		<ul>
			<li><img src="img/1.png"></li>
			<li><img src="img/2.png"></li>
			<li><img src="img/3.png"></li>
			<li><img src="img/4.png"></li>
			<li><img src="img/5.png"></li>
			<li><img src="img/6.png"></li>
		</ul>
	</div>

	<script type="text/javascript">
		window.onload=function(){
			var oDiv = document.getElementById('banner')
			var oUl = document.getElementsByTagName('ul')[0]
			var oLi = oUl.getElementsByTagName('li')
			var timer = null

			//拼接多一份ul里面的内容
			oUl.innerHTML+=oUl.innerHTML
			//计算ul的宽度
			oUl.style.width = oLi[0].offsetWidth*oLi.length+'px'

			function mover(){
				if(oUl.offsetLeft<-oUl.offsetWidth/2){
					oUl.style.left = 0
				}
				oUl.style.left = oUl.offsetLeft-1+'px'
			}

			timer = setInterval(mover,30)

			oDiv.onmouseover=function(){
				clearInterval(timer)
			}

			oDiv.onmouseout=function(){
				timer = setInterval(mover,30)
			}

		}
	</script>
</body>
</html>