javascript - img与js交换迭代超时

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);
} 

我有两个问题:

1. 如何让它在到达最后一张图像时暂停 2 秒。

2. 如果有人能解释这段代码，我将非常感激:

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

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

我从来没有见过这样的事情。它看起来像 for 循环但有所不同。

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 %(模数)frameCount 用于在无限时间内将计数保持在 0 到最大帧计数范围内。

示例:

Let frameCount = 10 and i = 0

i % frameCount = 0 % 10 = 0

++i % frameCount = 1 % 10 = 1

...
...

当 i == frameCount 即 i == 10 时，不会有第 10 帧(帧从 0 到 9)

所以，

10 % 10 = 0
11 % 10 = 1

...
...
And so on..

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