图片滑动时钟

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6 <style>
  7 .fl{
  8     float: left;
  9 }
 10 img{
 11     display: block;
 12     position: relative;
 13 }
 14 div{
 15     width: 123px;
 16     height: 173px;
 17     overflow: hidden;
 18 }
 19 </style>
 20 <script>
 21 window.onload = function(){
 22     function toDou(n){
 23         return n<10?'0'+n:''+n;
 24     }
 25     function toMove(obj,value,M){
 26         var aImg = obj.getElementsByTagName('img');
 27         var    t=0;
 28         var timer=null;
 29         if(value<0){value = M-1;}
 30         //console.log(value);
 31         aImg[0].style.top=aImg[1].style.top=t+'px';
 32         aImg[0].src = 'img/'+value+'.jpg';
 33         aImg[1].src = 'img/'+(value+1)%M+'.jpg';
 34 
 35         clearInterval(timer);
 36         timer = setInterval(function(){
 37             t-=10;
 38             aImg[0].style.top=aImg[1].style.top=t+'px';
 39             
 40             if(t<-163){
 41                 clearInterval(timer);
 42             }
 43         },30);
 44     }
 45     function time(){
 46         var oDate = new Date();
 47         var oS = oDate.getSeconds();
 48         var oH = oDate.getHours();
 49         var oM = oDate.getMinutes();
 50         var str = toDou(oH)+toDou(oM)+toDou(oS);
 51         //console.log(str);
 52         for(var i=0;i<str.length;i++){
 53             if(aDiv[i].index != str.charAt(i)){
 54                 toMove(aDiv[i],str.charAt(i)-1,arr[i]);
 55                 //alert(i);
 56             }
 57             aDiv[i].index = str.charAt(i);
 58         }    
 59     }
 60 
 61     var aDiv = document.getElementsByTagName('div');
 62     var oColon1 = document.getElementById('colon1');
 63     var oColon2 = document.getElementById('colon2');
 64     arr = ['3','4','6','10','6','10'];
 65     var onOff = true;
 66 
 67     time();
 68     setInterval(time,1000);
 69     setInterval(function(){
 70         onOff=!onOff;
 71 
 72         if(onOff){
 73             oColon1.src=oColon2.src='img/black.jpg';
 74         }else{
 75             oColon1.src=oColon2.src='img/colon.jpg';
 76         }
 77 
 78     },500);
 79 };
 80 </script>
 81 </head>
 82 <body>
 83     <div class="fl">
 84         <img src="img/0.jpg" alt="">
 85         <img src="img/0.jpg" alt="">
 86     </div>
 87     <div class="fl">
 88         <img src="img/0.jpg" alt="">
 89         <img src="img/0.jpg" alt="">
 90     </div>
 91     <img src="img/colon.jpg" alt="" class="fl" id="colon1">
 92     <div class="fl">
 93         <img src="img/0.jpg" alt="">
 94         <img src="img/0.jpg" alt="">
 95     </div>
 96     <div class="fl">
 97         <img src="img/0.jpg" alt="">
 98         <img src="img/0.jpg" alt="">
 99     </div>
100     <img src="img/colon.jpg" alt="" class="fl" id="colon2">
101     <div class="fl">
102         <img src="img/0.jpg" alt="">
103         <img src="img/0.jpg" alt="">
104     </div>
105     <div class="fl">
106         <img src="img/0.jpg" alt="">
107         <img src="img/0.jpg" alt="">
108     </div>
109 </body>
110 </html>
效果图如下