无缝滑动

最新推荐文章于 2020-04-17 16:12:47 发布

柏油

最新推荐文章于 2020-04-17 16:12:47 发布

阅读量194

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/74834419

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

<!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>