標籤：
依賴 http://www.cnblogs.com/wanqiu/p/4452711.html , 圖片的名稱 從0 -9 。 例如： 0.jpg 。 如果名稱不是這樣的，可用數組存起來使用！
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; } #box{ width: 1000px; height: 500px; margin: 20px auto; border: 1px solid #ccc; } #box ul{ height: 172px; } #box li{ position: relative; float: left; width: 122px; height: 172px; overflow: hidden; } #box li img{ position: absolute; top: 0; left: 0; } </style> <script src="hl_tool.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> window.onload = function(){ var oBox = document.getElementById(‘box‘); var aLi = oBox.getElementsByTagName(‘li‘); var sTime = ‘‘; for (var i = 0; i < aLi.length; i++) { aLi[i].innerHTML += aLi[i].innerHTML; } function fnTime(){ sTime = hgetTime(2).str; for (var i = 0; i < aLi.length; i++) { var index = 0; if(sTime.charAt(i) == 0){ index = 9; }else{ index = parseInt(sTime.charAt(i))-1; } aLi[i].getElementsByTagName(‘img‘)[0].src = ‘../img/‘+ sTime.charAt(i) +‘.JPG‘; aLi[i].getElementsByTagName(‘img‘)[1].src = ‘../img/‘+ index +‘.JPG‘; aLi[i].getElementsByTagName(‘img‘)[1].style.top = ‘-172px‘; aLi[i].getElementsByTagName(‘img‘)[0].style.top = ‘0‘; if(sTime.charAt(1) == 0 && (sTime.charAt(0)+sTime.charAt(1)) % 10 === 0 && (sTime.charAt(4)+sTime.charAt(5)) % 60 === 0 && (sTime.charAt(2)+sTime.charAt(3)) % 60 === 0){ aLi[0].getElementsByTagName(‘img‘)[1].style.top = ‘0px‘; aLi[0].getElementsByTagName(‘img‘)[0].style.top = ‘172px‘; hDoMove(aLi[0].getElementsByTagName(‘img‘)[1] , ‘top‘ ,10 ,-172); hDoMove(aLi[0].getElementsByTagName(‘img‘)[0] , ‘top‘ ,10 ,0); } if(sTime.charAt(2) == 0 && (sTime.charAt(2)+sTime.charAt(3)) % 60 === 0 && (sTime.charAt(4)+sTime.charAt(5)) % 60 === 0 ){ aLi[1].getElementsByTagName(‘img‘)[1].style.top = ‘0px‘; aLi[1].getElementsByTagName(‘img‘)[0].style.top = ‘172px‘; hDoMove(aLi[1].getElementsByTagName(‘img‘)[1] , ‘top‘ ,10 ,-172); hDoMove(aLi[1].getElementsByTagName(‘img‘)[0] , ‘top‘ ,10 ,0); } if(sTime.charAt(3) == 0 && (sTime.charAt(2)+sTime.charAt(3)) % 10 === 0 && (sTime.charAt(4)+sTime.charAt(5)) % 60 === 0){ aLi[2].getElementsByTagName(‘img‘)[1].style.top = ‘0px‘; aLi[2].getElementsByTagName(‘img‘)[0].style.top = ‘172px‘; hDoMove(aLi[2].getElementsByTagName(‘img‘)[1] , ‘top‘ ,10 ,-172); hDoMove(aLi[2].getElementsByTagName(‘img‘)[0] , ‘top‘ ,10 ,0); } if(sTime.charAt(4) == 0 && (sTime.charAt(4)+sTime.charAt(5)) % 60 === 0 ){ aLi[3].getElementsByTagName(‘img‘)[1].style.top = ‘0px‘; aLi[3].getElementsByTagName(‘img‘)[0].style.top = ‘172px‘; hDoMove(aLi[3].getElementsByTagName(‘img‘)[1] , ‘top‘ ,10 ,-172); hDoMove(aLi[3].getElementsByTagName(‘img‘)[0] , ‘top‘ ,10 ,0); } if(sTime.charAt(5) == 0 && (sTime.charAt(4)+sTime.charAt(5)) % 10 === 0 ){ aLi[4].getElementsByTagName(‘img‘)[1].style.top = ‘0px‘; aLi[4].getElementsByTagName(‘img‘)[0].style.top = ‘172px‘; hDoMove(aLi[4].getElementsByTagName(‘img‘)[1] , ‘top‘ ,10 ,-172); hDoMove(aLi[4].getElementsByTagName(‘img‘)[0] , ‘top‘ ,10 ,0); } aLi[5].getElementsByTagName(‘img‘)[1].style.top = ‘0px‘; aLi[5].getElementsByTagName(‘img‘)[0].style.top = ‘172px‘; hDoMove(aLi[5].getElementsByTagName(‘img‘)[1] , ‘top‘ ,10 ,-172); hDoMove(aLi[5].getElementsByTagName(‘img‘)[0] , ‘top‘ ,10 ,0); } } fnTime(); setInterval(fnTime, 1000 ); } </script> </head> <body> <div id="box"> <ul> <li><img src="../img/0.JPG"/></li> <li><img src="../img/0.JPG"/></li> <li><img src="../img/0.JPG"/></li> <li><img src="../img/0.JPG"/></li> <li><img src="../img/0.JPG"/></li> <li><img src="../img/0.JPG"/></li> </ul> </div> </body></html>
上下移動切換的時間表
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
