Can i implement a Pause and Resume function to my Slideshow Javascript?

Question

I am having a Javascript Slideshow. I need to implement a Pause and Resume button on my slideshow where in the slideshow is Paused when i click the Pause Button and when i click Resume Button, the slideshow should resume from where it stopped. This is the script below:

var Pic = new Array();
Pic[0] = 'https://loremflickr.com/320/240?ch01_3002200.jpg'
Pic[1] = 'https://loremflickr.com/320/240?ch01_3002300.jpg'
Pic[2] = 'https://loremflickr.com/320/240?ch01_3002400.jpg'
Pic[3] = 'https://loremflickr.com/320/240?ch01_3002500.jpg'
Pic[4] = 'https://loremflickr.com/320/240?ch01_3002600.jpg'
Pic[5] = 'https://loremflickr.com/320/240?ch01_3002700.jpg'
Pic[6] = 'https://loremflickr.com/320/240?ch01_3002800.jpg'
Pic[7] = 'https://loremflickr.com/320/240?ch01_3002900.jpg'
Pic[8] = 'https://loremflickr.com/320/240?ch01_3003000.jpg'
Pic[9] = 'https://loremflickr.com/320/240?ch01_3003100.jpg'
Pic[10] = 'https://loremflickr.com/320/240?ch01_3003200.jpg'

//this part in real code is replaced with a PHP script that print image location dynamically
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
  preLoad[i] = new Image();
  preLoad[i].src = Pic[i];
}
//all images are loaded on client
index = 0;

function update() {
  if (preLoad[index] != null) {
    document.images['foto'].src = preLoad[index].src;
    index++;
    setTimeout(update, 1000);
  }
}
update();

<div ALIGN="center">
  <img name="foto">
</div>
<button id="pause">Pause</button>
<button id="resume">Resume</button>

Answer 1

1. remove the timeout and use setInterval instead
2. clearInterval to stop/pause
3. toggle to pause/resume

var Pic = new Array();
Pic[0] = '../uploads/callmesid/Cam-1/ch01_00000000003002200.jpg'
Pic[1] = '../uploads/callmesid/Cam-1/ch01_00000000003002300.jpg'
Pic[2] = '../uploads/callmesid/Cam-1/ch01_00000000003002400.jpg'
Pic[3] = '../uploads/callmesid/Cam-1/ch01_00000000003002500.jpg'
Pic[4] = '../uploads/callmesid/Cam-1/ch01_00000000003002600.jpg'
Pic[5] = '../uploads/callmesid/Cam-1/ch01_00000000003002700.jpg'
Pic[6] = '../uploads/callmesid/Cam-1/ch01_00000000003002800.jpg'
Pic[7] = '../uploads/callmesid/Cam-1/ch01_00000000003002900.jpg'
Pic[8] = '../uploads/callmesid/Cam-1/ch01_00000000003003000.jpg'
Pic[9] = '../uploads/callmesid/Cam-1/ch01_00000000003003100.jpg'
Pic[10] = '../uploads/callmesid/Cam-1/ch01_00000000003003200.jpg'
//this part in real code is replaced with a PHP script that print image location dynamically
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
  preLoad[i] = new Image();
  preLoad[i].src = Pic[i];
}
//all images are loaded on client
var index = 0;
var length = Pic.length;
function update() {
  if (preLoad[index]) {
    document.images['foto'].src = preLoad[index].src;
    index++;
  }
}
function init() {
  // this resumes from where the index is. If you want to reset, we need more code
  clearInterval(t);
  t = setInterval(update,1000); 
}
function toggle(e) {
  const tgt = e.target.closest("button");
  if (tgt) {
    const pause = tgt.textContent === "Pause";
    if (pause) {
      clearInterval(t)
      tgt.textContent = "Resume";
    }  
    else {
      init(); 
      tgt.textContent = "Pause";      
    } 
  }  
}
document.getElementById('toggle').addEventListener('click', toggle);
update();
init()

<div ALIGN="center">
  <img name="foto">
</div>
<button id="toggle">Pause</button>

To add a wrap to my code change to var length = Pic.length; function update() { var currentIndex = index%length; if (preLoad[currentIndex]) { document.images['foto'].src = preLoad[currentIndex].src; index++; } }