JavaScript定时器 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>无缝滚动动画</title>
  6     <script type="text/javascript">
  7         window.onload = function(){
  8 
  9             var oDiv = document.getElementById("slide");
 10             var oBtn1 = document.getElementById("btn01");
 11             var oBtn2 = document.getElementById("btn02");
 12             var oUl = oDiv.getElementsByTagName("ul")[0];//血的教训必须加[i]
 13             oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;
 14             var iLeft = 0;
 15             var iSpeed = -2;
 16             var iNowspeed = 0;
 17             function moving(){
 18                 iLeft += iSpeed;
 19                 if(iLeft < -742)
 20                     iLeft = 0;
 21                 if(iLeft > 0)
 22                     iLeft = -742;
 23                 oUl.style.left = iLeft+'px';
 24             }
 25             setInterval(moving,10);
 26             oBtn1.onclick = function(){
 27                 iSpeed = -2;
 28             }
 29             oBtn2.onclick = function(){
 30                 iSpeed = 2;
 31             }
 32             oDiv.onmouseover = function(){
 33                 iNowspeed = iSpeed;
 34                 iSpeed = 0;
 35             }
 36             oDiv.onmouseout = function(){
 37                 iSpeed = iNowspeed;
 38             }
 39         }
 40     </script>
 41     <style type="text/css">
 42         *{
 43             margin:0px;
 44             padding:0px;
 45         }
 46         .list_con{
 47             width:742px;
 48             height:150px;
 49             border:1px solid #000;
 50             margin:50px auto 0;
 51             background-color:#f0f0f0;
 52             position:relative;
 53             overflow:hidden;
 54         }
 55         .list_con ul{
 56             list-style:none;
 57             width:1484px;
 58             height:150px;
 59             position:absolute;
 60             left:0px;
 61             top:0px;
 62         }
 63         .list_con li{
 64             width:128px;
 65             height:128px;
 66             float:left;
 67             margin:10px;
 68         }
 69         .btns_con{
 70             width:742px;
 71             height:30px;
 72             margin:0 auto 0;
 73             position:relative;
 74             background-color:#fff;
 75         }
 76         .left,.right{
 77             width:30px;
 78             height:30px;
 79             background-color:lightblue;
 80             position:absolute;
 81             font-size:30px;
 82             line-height:30px;
 83             color:#000;
 84             text-align:center;
 85             left:-31px;
 86             top:140px;
 87         }
 88         .right{
 89             left:743px;
 90             top:140px;
 91 
 92         }
 93     </style>
 94 </head>
 95 <body>
 96 <div class="btns_con">
 97     <div class="left" id="btn01">&lt;</div>
 98     <div class="right" id="btn02">&gt;</div>
 99 </div>
100 <div class="list_con" id="slide">
101 <ul>
102     <li><a href="#"><img src="timg.jpg" alt="goods_pic"></a></li>
103     <li><a href="#"><img src="tim.jpg" alt="goods_pic"></a></li>
104     <li><a href="#"><img src="timm.jpg" alt="goods_pic"></a></li>
105     <li><a href="#"><img src="tii.jpg" alt="goods_pic"></a></li>
106     <li><a href="#"><img src="timgg.jpg" alt="goods_pic"></a></li>
107 </ul>
108 </div>
109 </body>
110 </html>

 

posted @ 2019-03-20 10:28  Priceless  阅读(50)  评论(0)    收藏  举报