无缝滚动 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#div1 ul li img{
				width: 200px;
				height: 100px;
				
			}
			#div1{
				position: relative;
				width: 800px;
				height: 100px;
				margin:100px auto;
				overflow: hidden;
			}
			#div1 ul{
				position: absolute;
				left: 0;
				top: 0;
				
				overflow: hidden;
			}
			#div1 ul li{
				list-style: none;
				width: 200px;
				height: 100px;
				float: left;
			}
		</style>
		
		<script>
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				var oUl = oDiv.getElementsByTagName("ul")[0];
				var aLi = oUl.getElementsByTagName("li");
				
				var timer = null;
				var speed;
				oUl.innerHTML += oUl.innerHTML;
				oUl.style.width = aLi[0].offsetWidth * aLi.length +"px";//动态改变oUl的宽度
				
				function move(){
					//因为向左走所以为ul left为负数 当走到ul长度一半的时候 
					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";
				}
				
				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")[1].onclick = function(){
					speed = 2;
				}
				
				
			}
		</script>
	</head>
	<body>
		<a href="javascript:;">向左走</a>
		<a href="javascript:;">向右走</a>
		<div id="div1">
			<ul>
				<li><img src="img/bg1.jpg" alt="" /></li>
				<li><img src="img/bg2.jpg" alt="" /></li>
				<li><img src="img/bg3.jpg" alt="" /></li>
				<li><img src="img/bg4.jpg" alt="" /></li>
			</ul>
		</div>
	</body>
</html>

　　

posted @ 2016-03-11 19:54  mingjixiaohui  阅读(132)  评论(0)    收藏  举报