1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>无缝滚动</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 ul li{ 12 list-style: none; 13 } 14 #div1{ 15 position: relative; 16 width: 712px; 17 height: 108px; 18 margin: 100px auto; 19 background: red; 20 overflow: hidden; 21 } 22 #div1 ul{ 23 position: absolute; 24 left: 0; 25 top: 0; 26 } 27 #div1 ul li{ 28 float: left; 29 width: 178px; 30 height: 108px; 31 } 32 #div1 ul li img{ 33 width: 100%; 34 height: 100%; 35 } 36 a{ 37 display: inline-block; 38 border: 1px solid #999; 39 background: #ccc; 40 padding: 5px 10px; 41 margin: 20px; 42 } 43 a:hover{ 44 background: #0E6EB8; 45 color: #fff; 46 cursor: pointer; 47 } 48 </style> 49 </head> 50 <body> 51 <a javascript:; id="moveleft">向左走</a> 52 <a javascript:; id="moveright">向右走</a> 53 <div id="div1"> 54 <ul> 55 <li> 56 <img src="images/1.jpg" /> 57 </li> 58 <li> 59 <img src="images/2.jpg" /> 60 </li> 61 <li> 62 <img src="images/3.jpg" /> 63 </li> 64 <li> 65 <img src="images/4.jpg" /> 66 </li> 67 </ul> 68 </div> 69 <script> 70 var oDiv = document.getElementById('div1'); 71 var oUl = oDiv.getElementsByTagName('ul')[0]; 72 var oLi = oUl.getElementsByTagName('li'); 73 var speed = 2; 74 oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; 75 oUl.style.width = oLi[0].offsetWidth * oLi.length + 'px'; 76 function move(){ 77 if(oUl.offsetLeft < -oUl.offsetWidth/2){ 78 oUl.style.left = '0'; 79 } 80 if(oUl.offsetLeft > 0){ 81 oUl.style.left = -oUl.offsetWidth/speed + 'px'; 82 } 83 oUl.style.left = oUl.offsetLeft + speed + 'px'; 84 } 85 var timer = setInterval(move,30); 86 oDiv.onmouseover = function(){ 87 clearInterval(timer); 88 } 89 oDiv.onmouseout = function(){ 90 timer = setInterval(move,30); 91 } 92 93 document.getElementsByTagName('a')[0].onclick = function(){ 94 speed = -2; 95 } 96 document.getElementsByTagName('a')[1].onclick = function(){ 97 speed = 2; 98 } 99 </script> 100 </body> 101 </html>
效果：
