<!doctype html> <html> <head> <meta charset="utf-8"> <title>无缝滚动图片</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> * { margin:0; padding:0 } #div1 { width:800px; height:120px; margin:100px auto; position:relative; background:red; overflow:hidden } #div1 ul { position:absolute; left:0; top:0 } #div1 ul li { float:left; width:200px; height:120px; list-style:none } </style> </head> <body> <a href="javascript:;">向左走</a> <a href="javascript:;">向右走</a> <div id="div1"> <ul> <li>我是第一个</li> <li style="background: blue;">我是第二个</li> <li style="background: #000;">我是第三个</li> <li style="background: #666;">我是第四个</li> <li style="background: yellow;">我是第五个</li> <li style="background: #666;">我是第六个</li> </ul> </div> <script> window.onload = function() { var oDiv = document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var speed = 2; //oUl.innerHTML=oUl.innerHTML+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'; } if (oUl.offsetLeft > 0) { oUl.style.left = -oUl.offsetWidth / 2 + 'px' } oUl.style.left = oUl.offsetLeft + speed + 'px'; } var timer = setInterval(move, 30) oDiv.onmousemove = 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> </body> </html> <!------------------ 记得多写多看多练 ---------------->
