无缝隙滚动 - 爱码网

 1 <!doctype html>
 2  <html>
 3  <head>
 4  <meta charset="utf-8">
 5  <title>无标题文档</title>
 6  <style>
 7  *{padding:0; margin:0;}
 8  ul{ list-style:none;}
 9  #div{ width:300px; height:100px; margin:100px auto; border:1px solid #ff0000; position:relative; overflow:hidden;}
10  #div ul{ position:absolute; height:100px; left:0;}
11  #div ul li{ width:300px; height:100px; line-height:100px; text-align:center; float:left}
12  </style>
13  <script>
14  window.onload=function(){
15      var oDiv=document.getElementById("div");
16      var oUl=oDiv.getElementsByTagName("ul")[0];
17      var oLi=oUl.getElementsByTagName("li");
18      var oInput=document.getElementsByTagName('input');
19      oUl.innerHTML +=oUl.innerHTML;
20      oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
21      var iSeep=-2;
22      var tamer=null;
23      
24      
25      clearInterval(tamer);
26      function starMove(){
27           tamer=setInterval(function(){
28              
29              oUl.style.left=oUl.offsetLeft+iSeep+"px";
30              if(-oUl.offsetLeft >= oUl.offsetWidth/2){
31                  oUl.style.left="0px";
32              }else if(oUl.offsetLeft>0){
33                  oUl.style.left=-oUl.offsetWidth/2+"px";
34              }
35          },30)
36      }
37      starMove();
38      oDiv.onmouseover=function(){
39          clearInterval(tamer);
40      }
41      oDiv.onmouseout=function(){
42          starMove();
43      }
44      oInput[0].onclick=function(){
45          iSeep=-2;
46      }
47      oInput[1].onclick=function(){
48          iSeep=2;
49      }
50  }
51  </script>
52  </head>
53  
54  <body>
55  <input type="button" value="左">
56  <input type="button" value="右">
57  <div id='div'>
58      <ul>
59          <li>1</li>
60          <li>2</li>
61          <li>3</li>
62          <li>4</li>
63      </ul>
64  </div>
65  </body>
66  </html>