Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)

柔光的暖阳◎ 2022-07-15 06:30 159阅读 0赞

1、无缝滚动

原理：（1）让div动起来，让ul一直向左/向右移动；

（2）即利用定时器让物体从左到右或从右到左进行滚动。

采用offsetLeft——如oUl.style.left=oUl.offsetLeft-2+'px';（由左向右）

注意：offsetLeft为一个负值。

步骤：（1）复制li——innerHTML和+=，

（2）修改ul的width—可把之前的1倍宽度扩充到两倍

例如oUl.innerHTML=oUl.innerHTML+oUl.innerHTML；

（3）滚动过界时，重设位置，需要进行判断

2、无缝滚动的扩展

（1）改变滚动的方向

a、修改滚动的速度speed

若改变大小，即表示滚动的速度发生改变

若改变正负，即表示滚动的方向

b、修改判断条件

通过修改speed的正负，来改变滚动的方向

（2）鼠标移入、暂停事件

a、鼠标移入：关闭定时器clearInterval(timer);

b、鼠标移出：重新开启定时器，即setInterval(function,1000);

相关的代码如下：

<span style="font-family:KaiTi_GB2312;font-size:14px;"><!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>定时器实现的图片无缝滚动</title>
    		<style>
    			*{padding: 0;margin: 0;}
    			#div1{
    				position: relative;
    				width:820px;height: 155px;
    				margin: 100px auto;
    				overflow: hidden;}
    			#div1 ul{
    				position:absolute;
    				top:0;left: 0;
    				background: #5F9EA0;
    			}
    			#div1 ul li{
    				list-style: none;
    				width: 205px;height: 155px;
    				float: left;
    			}
    		</style>
    		<script>
    		
    		window.οnlοad=function(){
    			var oDiv=document.getElementById('div1');
    			var oUl=oDiv.getElementsByTagName('ul')[0];
    			var aLi=oUl.getElementsByTagName('li');
    			 
    			var speed=2;  //利用速度speed控制方向；
    			
    			oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
    			//求ul的宽度；
    			oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
    			
    			//移动的函数；
    			function move(){
    				if(oUl.offsetLeft<-oUl.offsetWidth/2){
    					//由于offsetLeft为一个负值，所以需要加一个负号；
    					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.οnmοuseοver=function(){
    				clearInterval(timer);
    			};
    			//鼠标移出，开启定时器；
    			oDiv.οnmοuseοut=function(){
    				timer=setInterval(move,30);
    			};
    			
    			document.getElementsByTagName('a')[0].οnclick=function(){
    				speed=-2;
    			};
    			document.getElementsByTagName('a')[1].οnclick=function(){
    				speed=2;
    			}
    		};
    		</script>
    	</head>
    	<body>
    		<a href="javascript:;">向左</a>
    		<a href="javascript:;">向右</a>
    		<div id="div1">
    			<ul>
    				<li><img src="img/p1.png"></li>
    				<li><img src="img/p2.png"></li>
    				<li><img src="img/p3.png"></li>
    				<li><img src="img/p4.png"></li>
    			</ul>
    		</div>
    	</body>
    </html></span><span style="font-size: 18px;">
    </span>