Question

我正在使用javascript制作一个简单的动画。当然我可以使用CSS关键帧，但这对我需要的东西不起作用，所以请不要使用CSS解决方案。我扔了一个状态div只是为了让你看到我的意思，而不必看到图像。 JSfiddle在下面。

无论如何这里是HTML。

    <div id="zero-walking"><img src="#" id="zeroImage"></div>
    <div id="statusDiv"></div>

这是javascript

    var index = 0;
    var zero = document.getElementById("zeroImage");

    var zeroArray = ["images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png", "images/6.png", "images/7.png", "images/8.png", "images/9.png", "images/10.png", "images/11.png"];

    zeroAnimate();

    function zeroAnimate() {



        zero.setAttribute('src', zeroArray[index]);

        index += 1;

        if (index == zeroArray.length) {
            index = 0;
        }

        var statusDiv = document.getElementById('statusDiv');
        statusDiv.innerHTML = zeroArray[index];
    }

    setInterval(zeroAnimate, 700);

http://jsfiddle.net/r9zfg3jp/

Answer 1

这个区块：

 index += 1;

 if (index == zeroArray.length) {
    index = 0;
 }

应该在函数的最后。

你问题index += 1正在statusDiv.innerHTML = zeroArray[index];发生，所以当你第一次到达那里时它是1（不是0）......

Answer 2

尝试将索引赋值运算符移动到方法的末尾。实际上，你是第一个增加索引，然后做工作，这意味着你正在跳过0帧......

Answer 3

有时候我会问自己为什么要帮忙。如果您只想循环覆盖这些图像，那就像：

function loopImages(elem, imgs, interval, loop){
  var i = 0, loopy = setInterval(function(){
    elem.src = imgs[i++];
    if(i === imgs.length){
      loop ? i = 0 : clearInterval(loopy);
    }
  }, interval);
}
loopImages(document.getElementById('zeroImage'), zeroArray, 700, true); // loops forever

为什么Array中的第一个图像第一次没有循环？

3 个答案: