Как определить количество циклов в анимированном изображении с помощью Javascript

Я сделал этот фрагмент 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 возвращает идентификатор интервала. Сохраните этот идентификатор в переменной и, если вы хотите остановить анимацию, передайте идентификатор в clearInterval()", но это буду очень признателен за обновление кода (я не знаю, как написать это в js).


javascript css animated
person typo_    schedule 18.01.2016    source источник
comment
Попробуйте что-нибудь и задайте более конкретный вопрос.   -  person Yury Tarabanko    schedule 18.01.2016
comment
Благодарим за ваше предложение; что касается программирования, я не ищу обучения на высоком уровне, чтобы стать программистом и, возможно, зарабатывать деньги, используя эти навыки; Я ищу некоторые ответы, пытаясь двигаться дальше в интересующих меня областях, вот и все.   -  person typo_    schedule 18.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете сделать что-то вроде этого, когда вы очищаете интервал после его запуска определенное количество раз:

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>

person winhowes    schedule 18.01.2016
comment
Извините (-1) за преобразование SO в сервис codeforme. - person Yury Tarabanko; 18.01.2016
comment
@YuryTarabanko Я понимаю, о чем вы говорите, но я думаю, что решение достаточно простое, но достаточно неясное, чтобы его мог понять новичок. - person winhowes; 18.01.2016
comment
Из профиля ОП я нуб, пытаюсь учиться. Так он ничему не научится :) - person Yury Tarabanko; 18.01.2016
comment
@YuryTarabanko, я тоже понимаю твою точку зрения; В любом случае, если честно, иногда сложно что-то попробовать, почти ничего не зная об этом языке программирования js. winhowes, спасибо, попробую ваше решение; - person typo_; 18.01.2016
comment
@YuryTarabanko, надеюсь, этот диалог будет ему полезен. Но я обязательно учту то, что вы сказали, для будущих ответов, какими бы простыми они ни были. Спасибо за напоминание :) - person winhowes; 18.01.2016
comment
@typo_78 почти ничего не зная об этом языке программирования js, есть куча отличных ресурсов для бесплатного изучения js. Это не так сложно. Слепым копипастом ничего не узнаешь. - person Yury Tarabanko; 18.01.2016
comment
@YuryTarabanko Согласен, но это не мой случай, я выше описал почему. В любом случае, спасибо. - person typo_; 18.01.2016
comment
@typo_78, если это правильный ответ, не могли бы вы отметить его как правильный? Спасибо :) - person winhowes; 19.01.2016
comment
@winhowes извините, я просто забыл; спасибо за напоминание :) - person typo_; 19.01.2016