Ставить на паузу анимацию картинок на 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 шт):

Автор решения: KernelSource

Ну у вас картинки по таймингу меняются, так? Значит можно ввести дополнительную переменную, которая определяет, активна ли сейчас анимация, или нет. что то типа var activeAnimate = true / false. Только в таком случае, наверное, логичнее использовать setInterval. Просто из таймера проверяете переменную activeAnimate, если true, то показываем новую картинку, иначе ничего не делаем. Соответственно, по клику меняем значение activeAnimate.

→ Ссылка