写了一个(没有用jQuery)的翻页时钟,但是在做轮播图片过渡时,遇到了一些逻辑上的问题。

我的想法

我想做的效果如下(有区别的是我的时钟翻页只是简单的图片轮播,不是这种向下翻)

我的想法是:

  • 初始化,先得到现在时间,然后将现在时间每一个数值索引到其对应的图片
    比如说,现在 0点49分59秒,那么(经过专门处理)对应的数值是004959,然后赋值给str,那么通过 aImage[i].src = ‘img/’+str.charAT(i)+’.jpg’ [也就是在图片序列对应的位置将起改为与时间相等的图片]

  • 初始化时间之后,就正式开始了运行,这个地方我的想法是,将前面那个时间(由于我这个地方设的最小单位是秒,那就假设过了一秒之后吧),把前面那个时间保存起来,然后与过了一秒的时间之后的str一个数字一个数字的比对,一旦发现那个地方两者不相等,那此处就要翻一页(也就是在此处运行一个函数)。

  • 终于来到函数这个位置了,我的问题就在于此,我用的是特别笨的一个办法来轮播,就是在一个时间DIV前定义两个img元素,一个正好在div里面,一个在下面等着[如图所示]。
    图片描述

    [1]: /img/bVvMXu
    [2]: /img/bVvMYm

一旦,这里的时间变动了,那么上面那张图片上移,下面那张图片源自然地在上面那张图片源的基础上+1,同时向上移动直到到达div中心,等待下一次触发

问题来了

  • 在这个地方,我需要变动的地方找到了之后,假设初始化的时候在上面的是A,在下面的是B,A向上移,B也向上移,当B到达Div中心时,A也到达顶端,开始准备下一次触发,但是下一次触发之后,A下来了,B就上去了,也就是A现在扮演了B原先的角色,B扮演了A原先的角色,这使我晕菜了,我感觉一会儿A又是B,B又是A,我无法使用JS去捕捉到它,可能用词不当吧,但是有一种直觉觉得这里不对
    这里也算是图片轮播上出的问题吧,小弟自学一个多月前端最近被这个问题困扰,求大神解答。


代码

代码比较混乱,因为思路被自己弄混了
而且是几个文件,so 直接贴 github上源码


求各位大牛帮我看一下我的思路是否正确,还有就是图片轮播我这里用以前的思路行不通,现在的思路如上所述自己把自己绕晕了。 1:30了 睡觉zzzz

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body onload="startTime()">
    <script type="text/javascript">
    function startTime(){
       var today=new Date() ;
       var h=today.getHours();
       var m=today.getMinutes();
       var s=today.getSeconds();
       document.body.innerHTML=checkTime(h)+'<img src="img/colon.JPG"/>'+checkTime(m)+'<img src="img/colon.JPG"/>'+checkTime(s);
    }

    setInterval('startTime()',1000);
    
    function checkTime(i){
        if(i<10){
            i="0"+i;
        }
        var a=i.toString().slice(0,1);
        var b=i.toString().slice(1,2);
        return "<img src=img/"+a+".JPG/>"+"<img src=img/"+b+".JPG/>"
        
    }
    </script>
</body>
</html>
  • 获取input中的file IE不支持.files 是否有类似兼容IE的API?
  • margin传递以及BFC问题
  • js数组当中的length问题
  • 一道js笔试题,不清楚什么意思
  • js异常控制如何跳出迭代
  • this指向
  • js怎么操作动态添加的元素
  • emoji表情的替换如何处理好一点
  • 关于移动端图片自适应问题。
  • 用多个swipe
  • echarts的tooltip无法显示,触发时formatter可以打印出数据;