标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 840px; height: 220px; box-shadow: 0px 0px 20px #000; margin:50px auto; overflow: hidden; border-radius: 15px; position: relative; } li{ list-style: none; } #box ul{ position: absolute; top: 0; left: 0; } #box ul li{ width: 200px; float: left; margin: 0 5px; } </style> <body> <div id="box"> <ul> <li> <a href="#"> <img src="3.jpg" alt="" width="200" /> </a> </li> <li> <a href="#"> <img src="2.jpg" alt="" width="200" /> </a> </li> <li> <a href="#"> <img src="1.jpg" alt="" width="200" /> </a> </li> <li> <a href="#"> <img src="0.jpg" alt="" width="200" /> </a> </li> </ul> </div> <script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); var ul = box.children[0]; var li = ul.children;//复制数组图片 ul.innerHTML += ul.innerHTML; ul.style.width = li.length*li[0].offsetWidth+80+‘px‘; setInterval(function(){ var i = ul.offsetLeft+10; if(i>=0){ i = -ul.offsetWidth/2; } ul.style.left = i + ‘px‘; }, 300); } </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/Harold-Hua/p/5253019.html
