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>>Solution :
- remove the timeout and use setInterval instead
- clearInterval to stop/pause
I added a wrap to your code (index%length)
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() {
var currentIndex = index%length;
if (preLoad[currentIndex]) {
document.images['foto'].src = preLoad[currentIndex].src;
index++;
}
}
function init() {
clearInterval(t)
t = setInterval(update,1000)
}
function pause() {
clearInterval(t)
}
document.getElementById('pause').addEventListener('click', pause);
document.getElementById('resume').addEventListener('click', init);
update();
init()<div ALIGN="center">
<img name="foto">
</div>
<button id="pause">Pause</button>
<button id="resume">Resume</button>