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>
标签：function,style,滚动,oUl,JS,var,oDiv,li,无缝 来源： https://www.cnblogs.com/jiushui/p/11603410.html