无缝滚动

  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>
效果：