www.w3cking.com

无缝滚动js （手写通俗易懂） 

 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>

 

posted @ 2013-06-19 13:09  Code-king  阅读(569)  评论(1)  编辑  收藏  举报
www.w3cking.com