Question

我发现这个javascript代码从#animation获取我的图像并逐个循环运行它们：

onload = function startAnimation() { 

var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;


onload = setInterval(function () { 

    frames[i % frameCount].style.display = "none";

    frames[++i % frameCount].style.display = "block";

    }
}, 300);
}

我有两个问题：

如何在到达最后一张图片时暂停2秒。
如果有人能解释这段代码，我会真的很高兴：

frames [i％frameCount] .style.display =＆＃34; none＆＃34;;

frames [++ i％frameCount] .style.display =＆＃34; block＆＃34;;

我从来没有见过这样的东西。它看起来像循环但不同。

Answer 1

1。试试这个

var frames = document.getElementById("animation").children;

var frameCount = frames.length;
var i = 0;
var x1 = 2000;

function calllink() {

  frames[i % frameCount].style.display = "none";

  frames[++i % frameCount].style.display = "block";

  if ((i % frameCount) == (frameCount - 1)) {
    setTimeout(calllink, x1);
  } else {
    setTimeout(calllink, 300);
  }
};
setTimeout(calllink, 300);

以下是我实现上述逻辑Fiddle

的示例

2。 i % (modulus) frameCount用于将计数保持在0到最大帧数的无限时间内。

示例：

Let frameCount = 10 and i = 0

i % frameCount = 0 % 10 = 0

++i % frameCount = 1 % 10 = 1

...
...

当我== frameCount即i == 10时，将不会有任何第10帧（帧从0到9）

所以，

10 % 10 = 0
11 % 10 = 1

...
...
And so on..

每次调用该函数时，它都会将下一帧设置为可见并隐藏前一帧。

Answer 2

@Roberto在这里有一个很好的答案但不知何故被删除了。如果有人能再次发布关于如何在每次循环后暂停代码的示例，我会很高兴。

使用js img交换迭代超时

2 个答案: