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>
