How to define number of cycles in animated Image with Javascript

Question

I have this snipped made by gilly3 (special thanks). Is there any possibility to define and apply the desired number of cycles? As we can see, the code will repeat the sequences.

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>

I have to recognise that I've received a sugestion: "setInterval returns an interval id. Store that id in a variable and, when you want to stop the animation, pass the id to clearInterval()" but it will be much appreciated a code update (I don't know how to write this in js).

Thank you for your suggestion; regarding the coding stuff, I am not looking for lerarning at a high level in order to become a programmer and perhaps to earn money using this skills; I am looking for some answers trying to move on in my interested fields that's all. — typo_, Jan 18 '16 at 10:08

score 0 · Accepted Answer · edited Jan 18 '16 at 10:46

You could do something like this where you clear the interval once it's run a certain number of times:

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

This requires the least code mutation, but you could also do something similar with setTimeout's.

Snippet here:

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>

@YuryTarabanko I get what you're saying, but I think the solution is simple enough but obscure enough for a beginner to figure out. — winhowes, Jan 18 '16 at 09:57
From OP's profile "I'm a noob trying to learn." He wont learn anything this way :) — Yury Tarabanko, Jan 18 '16 at 10:01
@YuryTarabanko, I also understand your point of view; Anyway, honestly sometimes it's hard to try something knowing almost nothing about this programing language js. winhowes, thank you, I'll try your solution; — typo_, Jan 18 '16 at 10:02
@YuryTarabanko hopefully this dialog will be helpful for him to learn. But I'll definitely keep what you've said in mind for future answers, no matter how simple they may be. Thanks for the reminder :) — winhowes, Jan 18 '16 at 10:05
@typo_78 "knowing almost nothing about this programing language js" there is a bunch of excellent resources to learn js for free. It's not that hard. You wont learn anything by blind copypaste. — Yury Tarabanko, Jan 18 '16 at 10:05
@YuryTarabanko I agree but it's not my case, I've described above why. Thank you anyway. — typo_, Jan 18 '16 at 10:10
@typo_78 if this is the right answer can you please mark it as correct? Thanks :) — winhowes, Jan 19 '16 at 17:46
@winhowes so sorry, I simply forgot; thank you for your reminder :) — typo_, Jan 19 '16 at 19:47

How to define number of cycles in animated Image with Javascript

1 Answers1