如何使用 Javascript 定义动画图像中的循环数

Question

我有 gilly3 制作的这个片段（特别感谢）。是否有可能定义和应用所需的循环次数？如我们所见，代码将重复序列。

onload = function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0;
    setInterval(function () { 
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
    }, 100); 
}

#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}

<div id="animation"> 
    <img src="https://40.media.tumblr.com/fd2e0116f31a0fcdc8f3531dcaaa90dc/tumblr_o0w5avLZFM1rpy0r6o1_540.jpg" />
    <img src="https://41.media.tumblr.com/13699ab5ac456da7712fae015ba3a7a5/tumblr_np0yulyrtz1tn6jt3o1_540.jpg" />
    <img src="https://41.media.tumblr.com/6f0cea1195cfd37d468dcd51cb8ca5be/tumblr_nz0hywwevQ1s0x1p3o1_r2_540.jpg" />
    <img src="https://40.media.tumblr.com/cfa4f49cfcd79b0afa997d9fb746d93e/tumblr_o0kwteTCVD1qzqavpo1_540.jpg" />
    <img src="https://40.media.tumblr.com/81b9d21f1b15584cd75be63e3388aa15/tumblr_ni0eqtik0P1qgwfzao1_540.jpg" />
    <img src="https://36.media.tumblr.com/605ce3769d8ca286454f1355749aead2/tumblr_ntx88hD8rP1spnyg9o1_500.jpg" />
    <img src="https://40.media.tumblr.com/125a40e474d2d4a8eea6e0a28e24df83/tumblr_o11pefcs5m1sh1x48o1_540.jpg" />
    <img src="https://41.media.tumblr.com/bb8ab516d0495bfc35e2413611472daa/tumblr_nycp9fWVTc1qcr6iqo1_540.jpg" />

</div>

我必须承认我收到了一个建议： "setInterval returns 一个间隔 id。将该 id 存储在一个变量中，当你想停止动画时，将 id 传递给 clearInterval()" 但非常感谢代码更新（我不知道如何在 js 中写这个）。

Answer 1

你可以做这样的事情，一旦它运行一定次数就清除间隔：

onload = function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0;
    var numberOfCycles = 10; // Set this to whatever you want
    var myInterval = setInterval(function () { 
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        if (i === numberOfCycles * frameCount) {
            clearInterval(myInterval);
        }
    }, 100); 
}

这需要最少的代码更改，但您也可以使用 setTimeout 做类似的事情。

这里的片段：

onload = function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0;
    var numberOfCycles = 3; // Set this to whatever you want
    var myInterval = setInterval(function () { 
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        if (i === numberOfCycles * frameCount) {
            clearInterval(myInterval);
        }
    }, 100); 
}

#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}

<div id="animation"> 
    <img src="https://40.media.tumblr.com/fd2e0116f31a0fcdc8f3531dcaaa90dc/tumblr_o0w5avLZFM1rpy0r6o1_540.jpg" />
    <img src="https://41.media.tumblr.com/13699ab5ac456da7712fae015ba3a7a5/tumblr_np0yulyrtz1tn6jt3o1_540.jpg" />
    <img src="https://41.media.tumblr.com/6f0cea1195cfd37d468dcd51cb8ca5be/tumblr_nz0hywwevQ1s0x1p3o1_r2_540.jpg" />
    <img src="https://40.media.tumblr.com/cfa4f49cfcd79b0afa997d9fb746d93e/tumblr_o0kwteTCVD1qzqavpo1_540.jpg" />
    <img src="https://40.media.tumblr.com/81b9d21f1b15584cd75be63e3388aa15/tumblr_ni0eqtik0P1qgwfzao1_540.jpg" />
    <img src="https://36.media.tumblr.com/605ce3769d8ca286454f1355749aead2/tumblr_ntx88hD8rP1spnyg9o1_500.jpg" />
    <img src="https://40.media.tumblr.com/125a40e474d2d4a8eea6e0a28e24df83/tumblr_o11pefcs5m1sh1x48o1_540.jpg" />
    <img src="https://41.media.tumblr.com/bb8ab516d0495bfc35e2413611472daa/tumblr_nycp9fWVTc1qcr6iqo1_540.jpg" />

</div>

如何使用 Javascript 定义动画图像中的循环数

How to define number of cycles in animated Image with Javascript

javascript

css

animated