无缝滑动

矫情吗；* 2024-02-17 23:03 18阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			
    			#div1 ul li{
    				list-style: none;
    			    width: 280px;
    			    height: 186px;
    				float: left;
    			}
    			#div1 ul {
                    left: 0px;
                    top: 0px;
    				position: absolute;
    				
    			}
    			
    			#div1 {
    				width:540px;
    				height:186px;		
    				position: relative;
    				margin: 100px auto;
    				background: red;		
    				overflow: hidden;
    			}
    		</style>
    		
    		<script>
    			
    			window.onload = function(){
    				var speed = -2;
    				var times = null ;
    				
    				var oDiv = document.getElementById("div1");
    				var oUl = document.getElementsByTagName("ul")[0];
    				var oLi = document.getElementsByTagName("li");
    				
    				function dirct(){
    					if(oUl.offsetLeft < -oUl.offsetWidth/2){
    						oUl.style.left = '0';  //0可以不加px,但是其他都必须加
    					}
    					oUl.style.left = oUl.offsetLeft + speed +'px';
    				}	
    				
    				oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
    				oUl.style.width = oLi[0].offsetWidth * oLi.length + 'px';//设置宽度，否则ul支撑不住，li会往下掉
    				times = setInterval(dirct,30);
    				
    				oDiv.onmouseover = function(){
    					clearInterval(times);
    				}
    				
    				oDiv.onmouseout = function(){
    					times = setInterval(dirct,30);
    				}
    				
    				document.getElementsByTagName("a")[0].onclick = function(){
    					speed = 2;
    				}
    				document.getElementsByTagName("a")[1].onclick = function(){
    					speed = -2;
    				}
    				
    			}
    			
    		</script>
    		
    	</head>
    	<body>
    		<a href="javascript:;">向右走</a>
    		<a href="javascript:;">向左走</a>
    		
    		<div id = "div1">
    			 <ul>
    			 	<li><img src="images/2.png"/></li>
    			 	<li><img src="images/4.png"/></li>
    			 </ul>
    		</div>
    		
    	</body>
    </html>