<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #div1 ul li img{ 200px; height: 100px; } #div1{ position: relative; 800px; height: 100px; margin:100px auto; overflow: hidden; } #div1 ul{ position: absolute; left: 0; top: 0; overflow: hidden; } #div1 ul li{ list-style: none; 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>