JS无缝滚动

代码：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         #div1{
12             width: 400px;
13             height: 100px;
14             margin: 0 auto;
15             position: relative;
16             background-color: red;
17             overflow: hidden;
18         }
19         #div1 ul{
20             position: absolute;
21             top: 0;
22             left: 0;
23         }
24         #div1 li{
25             list-style: none;
26             width: 90px;
27             height: 100px;
28             margin-right: 10px;
29             background-color: pink;
30             text-align: center;
31             line-height: 100px;
32             font-size: 20px;
33             font-weight: bold;
34             float: left;
35         }
36     </style>
37     <script type="text/javascript">
38         window.onload=function(){
39             var oDiv=document.getElementById("div1");
40             var oUl=oDiv.getElementsByTagName("ul")[0];
41             var aLi=oUl.getElementsByTagName("li");
42             var aInput=document.getElementsByTagName("input");
43             var direction=-2;
44             oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//把自己内部的东西li复制一份，然后又给自己
45             oUl.style.width=(aLi[0].offsetWidth+10)*aLi.length+"px";//加10是因为这个li有一个外边距
46             console.log(oUl.style.width);
47             function move(){
48                 if (oUl.offsetLeft<-oUl.offsetWidth/2) {
49                     oUl.style.left="0";
50                 }
51                 if (oUl.offsetLeft>0) {
52                     oUl.style.left=-oUl.offsetWidth/2+"px";
53                 }
54                 oUl.style.left=oUl.offsetLeft+direction+"px";
55             };
56             var timer=setInterval(move,30);
57             oDiv.onmouseover=function(){
58                 clearInterval(timer);
59             };
60             oDiv.onmouseout=function(){
61                 timer=setInterval(move,30);
62             };
63             aInput[0].onclick=function(){
64                 direction=-2;
65             };
66             aInput[1].onclick=function(){
67                 direction=2;
68             };
69         };
70     </script>
71 </head>
72 <body>
73     <input type="button" value="向左">
74     <input type="button" value="向右">
75     <div id="div1">
76         <ul>
77             <li>国</li>
78             <li>庆</li>
79             <li>快</li>
80             <li>乐</li>
81         </ul>
82     </div>
83 </body>
84 </html>
猜你喜欢
