如何为循环播放的动画图片序列添加播放/暂停切换按钮？

要给你的图片循环动画添加播放/暂停切换功能，需要做以下几个关键修改：

1. 添加控制按钮（HTML部分） #

先在页面里加入承载图片的元素和切换按钮：

<img id="img" alt="动画序列图片">
<button id="toggleBtn">暂停</button>

2. 修改JavaScript代码 #

调整原有逻辑，加入播放状态跟踪、定时器管理和按钮交互：

// 图片序列数组
const images = [
 'images/1.svg',
 'images/2.svg',
 'images/3.svg',
 'images/4.svg',
 'images/5.svg',
 'images/6.svg',
 'images/7.svg',
 'images/8.svg',
 'images/9.svg',
 'images/10.svg',
 'images/11.svg',
 'images/12.svg',
 'images/13.svg',
 'images/14.svg',
 'images/15.svg',
 'images/16.svg',
 'images/17.svg',
 'images/18.svg',
];

let currentIndex = 0;
let animationInterval;
let isPlaying = true;

// 初始化启动动画
startAnimation();

function animate() {
  document.getElementById("img").src = images[currentIndex];
  currentIndex = (currentIndex + 1) % images.length; // 简洁的循环取余写法
}

function startAnimation() {
  animationInterval = setInterval(animate, 100);
}

function toggleAnimation() {
  if (isPlaying) {
    // 暂停逻辑：清除定时器，更新按钮文字
    clearInterval(animationInterval);
    document.getElementById("toggleBtn").textContent = "播放";
  } else {
    // 播放逻辑：重启定时器，更新按钮文字
    startAnimation();
    document.getElementById("toggleBtn").textContent = "暂停";
  }
  isPlaying = !isPlaying;
}

// 给按钮绑定点击切换事件
document.getElementById("toggleBtn").addEventListener("click", toggleAnimation);

核心改动说明 #

• 定时器管理：用变量animationInterval保存定时器ID，确保能通过clearInterval精准暂停动画
• 状态跟踪：isPlaying变量记录当前播放状态，切换时同步更新按钮显示文本
• 简化循环逻辑：用取余运算替代原有的长度判断，代码更简洁高效
• 事件绑定：通过点击事件触发状态切换函数，实现按钮控制功能

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