无缝滚动
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin:0px; padding:0px; } #main { height:200px; } #div1{ width:1200px; height:200px; background-color:salmon; position:relative; background-color:red; overflow:hidden; float:left; } #div1 ul{ position:absolute; left:0px; top:0px; } #div1 ul li{ float:left; list-style:none; width:300px; height:200px; } #goLeft{ float:left; } #goLeft{ float:left; } </style> <script> window.onload = function () { var oDiv1 = document.getElementById("div1"); var oUl = oDiv1.getElementsByTagName("ul")[0]; var aLi = oUl.getElementsByTagName("li"); var speed = -2; var timer; oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length + "px"; function move() { if (oUl.offsetLeft < -oUl.offsetWidth / 2) { oUl.style.left = "0" + px; } if (oUl.offsetLeft > 0) { oUl.style.left = -oUl.offsetWidth / 2 + "px"; } oUl.style.left = oUl.offsetLeft + speed + "px"; } timer = setInterval(move, 30); var oGoRight = document.getElementById("goRight"); var oGoLeft = document.getElementById("goLeft"); oGoLeft.onclick = function () { speed = -2; } oGoRight.onclick = function () { speed = 2; } oDiv1.onmouseover = function () { clearInterval(timer); } oDiv1.onmouseout = function () { timer = setInterval(move, 30); } } </script> </head> <body> <div id="main"> <img id="goLeft" src="D:html滚动的图片picleft.png" /> <div id="div1"> <ul> <li><img src="D:html滚动的图片picaaa.jpg" /></li> <li><img src="D:html滚动的图片picbb.jpg" /></li> <li><img src="D:html滚动的图片picccc.jpg" /></li> <li><img src="D:html滚动的图片picddd.jpg" /></li> </ul> </div> <img id="goRight" src="D:html滚动的图片pic ight.png" /> </div> </body> </html>