上下移动切换的时间表

依赖 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{
                 1000px;
                height: 500px;
                margin: 20px auto;
                border: 1px solid #ccc;
            }
            #box ul{
                height: 172px;
            }
            #box li{
                position: relative;
                float: left;
                 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>

相关阅读:
第一个Android应用扫描宝欲挑战传统扫描枪
 前端工程师在实现支付功能的时候能做些什么（V客学院技术分享）？
HBuilder android 打包指南（V客学院技术分享）
JavaScript 事件处理详解
 关于webpack的path和publicPath。
svg线条的动画到渐变
 vue目录结构及其对应作用
 数据改变视图未变问题解决(Object.assign)
ES6语法的简单介绍——拓展运算符
 webpack打包原理
原文地址：https://www.cnblogs.com/wanqiu/p/4452779.html