JavaScript6-CSDN博客

本文链接：https://blog.csdn.net/qq_51082388/article/details/120714341

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20211008</title>
		<style>
		*{margin: 0;padding: 0;}
		#div1{width: 712px;height: 108px;margin: 100px auto;position: relative;overflow: hidden;}
		#div1 ul {position: absolute;left: 0;top: 0;}
		#div1 ul li {float: left;
		width: 178px;height: 108px;list-style: none;}
		</style>
		<script>
	window.onload=function()
	{
		var oDiv=document.getElementById('div1');
		var oUl=oDiv.getElementsByTagName('ul')[0];
		var aLi=oUl.getElementsByTagName('li');
		oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
		oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
		setInterval(function(){
			if(oUl.offsetLeft<-oUl.offsetWidth/2)
			{
				oUl.style.left='0';
			}
			oUl.style.left=oUl.offsetLeft-2+'px';
		},30);
	};
		</script>
	</head>
	<body>
		<div id="div1">
			<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>
			    
			</ul>
		</div>
	</body>
</html>

在这里插入图片描述

解决方案

自己看一遍又一遍的代码，然后发现问题改了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20211008</title>
		<style>
		*{margin: 0;padding: 0;}
		#div1{width: 712px;height: 108px;margin: 100px auto;position: relative;overflow: hidden;}
		#div1 ul {position: absolute;left: 0;top: 0;}
		#div1 ul li {float: left;
		width: 178px;height: 108px;list-style: none;}
		</style>
		<script>
	window.onload=function()
	{
		var oDiv=document.getElementById('div1');
		var oUl=oDiv.getElementsByTagName('ul')[0];
		var aLi=oUl.getElementsByTagName('li');
		var speed=4;
		oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
		oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
		
		
		function move()
		{
			if(oUl.offsetLeft<-oUl.offsetWidth/2)
			{
				oUl.style.left='0';
			}
			if(oUl.offsetLeft>0)
			{
				oUl.style.left=-oUl.offsetWidth/2+'px';
			}
			oUl.style.left=oUl.offsetLeft+speed+'px';
		}
		
		
		
		
		
		
		
		
		
		var timer=setInterval(move, 30);
		oDiv.onmouseover=function()
		{
			clearInterval(timer);
			
		};
		oDiv.onmouseout=function()
		{
			timer=setInterval(move,30);
		};
		document.getElementsByTagName('a')[0].onclick=function()
		{
			speed=-2;
		};
		document.getElementsByTagName('a')[0].onclick=function()
		{
			speed=2;
		};
		};
		</script>
	</head>
	<body>
		<div id="div1">
			<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>
			    
			</ul>
		</div>
	</body>
</html>