我可以为幻灯片 Javascript 实现暂停和恢复功能吗？

Question

我正在播放 Javascript 幻灯片。我需要在幻灯片上实现一个暂停和恢复按钮，当我单击“暂停”按钮时，幻灯片将暂停，当我单击“恢复”按钮时，幻灯片应从停止的位置恢复。这是下面的脚本：

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. 删除超时并使用 setInterval 代替
2. 清除停止/暂停的间隔

我在你的代码中添加了一个换行（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>