javascript方式实现无缝滚动（之一）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .outer{ margin:30px auto; position:relative; height:44px; width:256px; overflow:hidden; } .inner { position:absolute; padding:0px; margin:0px; top:0px; left:0px; list-style:none; } .inner li{ height:40px; width:60px; border:2px solid #ccc; float:left; } .li1{ background:green; } .li2{ background:red; } .li3{ background:yellow; } .li4{ background:pink; } </style> </head> <body> <center>重复循环显示</center> <div id="outer" class="outer"> <ul id="inner" class="inner"> <li class="li1">11111</li> <li class="li2">22222</li> <li class="li3">33333</li> <li class="li4">44444</li> </ul> </div> </body> <script type="text/javascript"> //这里我们来实现物体的无缝滚动滴呀; window.onload=function (){ var outer=document.getElementById("outer"); var inner=document.getElementById("inner"); //它是一个数组； inner.innerHTML=inner.innerHTML+inner.innerHTML; var lis=inner.getElementsByTagName("li"); var len=lis.length; //开个定时器; inner.style.width=(lis[0].offsetWidth*len)+'px'; setInterval(function (){ if(Math.abs(inner.offsetLeft)>Math.round(inner.offsetWidth/2)){ inner.style.left='0'; //循环的调整为0 } inner.style.left=inner.offsetLeft-1+'px'; },30) } </script> </html>
效果：(当然我们可以控制的方法，停止，等一些属性，我们后期再做一个完整的，这里只是做一个简单的demo)
实现方式二：
