JS实现图片自动滚动(图片横向滚动)

会飞的大象
2021-04-07 / 0 评论 / 0 点赞 / 798 阅读 / 0 字
04/07
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/test.css" type="text/css" />
    <title>Document</title>
    <body>
	  <div id="div1">
			<ul>
			
			<li><img src="img/img11.png" alt=""></li>
			
			<li><img src="img/img12.png" alt=""></li>
			
			<li><img src="img/img13.png" alt=""></li>
			
			<li><img src="img/img21.png" alt=""></li>
			</ul>
		</div>
	</body>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> 
    <script type="text/javascript">  
    	window.onload=function(){
			var oDiv = document.getElementById('div1');
		
			var oUl = document.getElementsByTagName('ul')[0];
		
			var Li = oUl.getElementsByTagName('li');//获取ul下的所有li
		
			oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;//li下的内容进行想加
		
			oUl.style.width = Li[0].offsetWidth*Li.length+'px';//ul的宽度等于每个li的宽度乘以所有li的长度
		
			var speed = 2
		
			//主方法
		
			function move(){
		
				//如果左边横向滚动了长度一半之后,回到初始位置
		
				if(oUl.offsetLeft<-oUl.offsetWidth/speed){
		
					oUl.style.left = '0'
		
				}
		
				//如果右边横向滚动的距离大于0 就让他的位置回到一半
		
				if(oUl.offsetLeft>0){
		
					oUl.style.left = -oUl.offsetWidth/speed+'px';
		
				}
		
				//oUl.style.left = oUl.offsetLeft-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)
		
			}
		
		}
    </script>
</head>

<body> 
</body>
</html>
目录CONTENT

JS实现图片自动滚动(图片横向滚动)

评论区
