如何为JavaScript轮播图实现暂停与恢复功能？

原轮播通过嵌套setTimeout实现自动切换，要添加暂停/恢复功能，核心是控制定时器的创建与清除，同时保留当前轮播的位置。以下是修改后的完整代码：

HTML代码 #

<div ALIGN="center">
  <img name="foto">
</div>
<button id="pause">暂停</button>
<button id="resume">恢复</button>

修改后的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'

var p = Pic.length;
var preLoad = new Array();
for (var i = 0; i < p; i++) {
  preLoad[i] = new Image();
  preLoad[i].src = Pic[i];
}

var index = 0;
var timer; // 存储定时器ID，用于后续清除

function update() {
  // 循环轮播：索引超出范围时重置为0
  if (index >= preLoad.length) {
    index = 0;
  }
  if (preLoad[index]) {
    document.images['foto'].src = preLoad[index].src;
    index++;
    // 保存定时器ID，方便暂停时清除
    timer = setTimeout(update, 1000);
  }
}

// 绑定暂停按钮点击事件
document.getElementById('pause').addEventListener('click', function() {
  clearTimeout(timer);
  timer = null; // 标记定时器已清除
});

// 绑定恢复按钮点击事件
document.getElementById('resume').addEventListener('click', function() {
  // 避免重复创建定时器（防止多次点击恢复导致轮播加速）
  if (!timer) {
    update();
  }
});

// 初始化启动轮播
update();

关键修改说明 #

1. 定时器管理：新增timer变量存储setTimeout的返回ID，暂停时通过clearTimeout(timer)终止下一次轮播触发。
2. 暂停逻辑：点击暂停按钮后，轮播会停在当前显示的图片上，不会继续切换。
3. 恢复逻辑：点击恢复按钮时，从当前index对应的下一张图片继续轮播，完全保留暂停前的进度。
4. 循环轮播优化：添加索引重置逻辑，解决原代码轮播到最后一张后停止的问题，实现无限循环。

内容的提问来源于stack exchange，提问作者Sujith