Ставить на паузу анимацию картинок на JS
Объясните, пожалуйста, как можно поставить на паузу анимацию картинок, сделанную на JS (не мной, я взял готовый код и переделал)?
var Pic = new Array();
var Time = new Array();
Pic[1] = 'https://www.hibiny.com/images/news/2020/225764/e3d5e043d30a95582996ae702475e7880.jpg'
Time[1] = '06 Ноября 23:30'
Pic[2] = 'https://www.hibiny.com/images/news/2020/225776/4a07004bc546e7795bb839627a8e874d.jpg'
Time[2] = '06 Ноября 23:35'
Pic[3] = 'https://www.hibiny.com/images/news/2020/225773/1ae4cd1a1dd9c19300fa3ff7bb77c084.jpg'
Time[3] = '06 Ноября 23:40'
Pic[4] = 'https://www.hibiny.com/images/news/2020/225773/20872d649f23a6ccd995ddcb6b00cdee.jpg'
Time[4] = '06 Ноября 23:45'
Pic[5] = 'https://www.hibiny.com/images/news/2020/225773/83dfa9724a70e72aec42afc4deb723e7.jpg'
Time[5] = '06 Ноября 23:50'
var p = Pic.length;
var preLoad = new Array();
var fieldNameElement = document.getElementById('timer');
for (i = 0; i < p; i++)
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
//all images are loaded on client
i = 0;
function update()
{
if (preLoad[i]!= null)
{
document.images['foto'].src = preLoad[i].src;
fieldNameElement.textContent = Time[i];
i++;
if (i>=p)
{
i=0;
setTimeout(update, 500);
}
else
{
setTimeout(update, 200);
}
}
}
update();
.box2 {
position: relative;
top: 10px;
left: 220px;
z-Index:8;
background: #FFFFFF;
width:130px;
height:20px;
padding:5px 10px 5px 10px;
text-align:center;
border-radius: 5px;
border: 1px solid #e1e1e1;
}
.box {
top: -30px;
z-Index:1;
position: relative;
overflow:hidden;
width:600px;
height:400px;
border-radius: 5px;
border: 1px solid #e1e1e1;
}
.box img {
position: absolute;
//top:70%;
//left:120%;
//transform: scale(2.5,2.5) translate(-50%,-50%) rotate(140deg);
width:600px;
height:600px;
object-fit:cover;
}
<div style="float:left; padding:10px 10px 0px 10px;">
<div class="box2"><span id="timer">text</span></div>
<div class="box">
<img name="foto" src="/images/2020/weather/icons/aurora/load.gif">
</div>
</div>
https://jsfiddle.net/hibinyru/549vkdhx/11/
Хотелось бы, чтобы при клике на картинке анимация останавливалась, при втором клике продолжалась с того места где остановилась. Желательно с примером, я полный ноль в javascript
Ответы (1 шт):
Ну у вас картинки по таймингу меняются, так? Значит можно ввести дополнительную переменную, которая определяет, активна ли сейчас анимация, или нет. что то типа var activeAnimate = true / false. Только в таком случае, наверное, логичнее использовать setInterval. Просто из таймера проверяете переменную activeAnimate, если true, то показываем новую картинку, иначе ничего не делаем. Соответственно, по клику меняем значение activeAnimate.