修复JavaScript Slider自动播放不全问题并添加播放暂停按钮

一、修复自动播放轮播问题 #

自动播放仅停在第二张，大概率是索引未正确循环重置导致的。以下是完整的自动播放实现逻辑，核心是当滑块到达最后一张后，将索引重置为0，实现循环轮播：

// 滑块核心元素与状态
const slides = document.querySelectorAll('.slide');
const slideCount = slides.length;
let currentSlide = 0;
let autoplayInterval;
const autoplayDelay = 3000; // 每张停留3秒

// 切换幻灯片函数
function goToSlide(index) {
  // 隐藏所有幻灯片
  slides.forEach(slide => slide.classList.remove('active'));
  // 显示目标幻灯片
  slides[index].classList.add('active');
  currentSlide = index;
}

// 自动播放函数
function startAutoplay() {
  autoplayInterval = setInterval(() => {
    // 计算下一张索引：到达最后一张后回到0
    currentSlide = (currentSlide + 1) % slideCount;
    goToSlide(currentSlide);
  }, autoplayDelay);
}

// 初始化：显示第一张并启动自动播放
goToSlide(0);
startAutoplay();

二、添加符合WCAG标准的播放/暂停按钮 #

WCAG要求按钮需满足键盘可访问性、状态可感知、语义化标签，具体实现如下：

1. HTML结构 #

<button id="playPauseBtn" aria-label="暂停自动播放">
  ⏸️ 暂停
</button>

2. JavaScript逻辑 #

const playPauseBtn = document.getElementById('playPauseBtn');
let isAutoplaying = true;

// 切换播放/暂停状态
function toggleAutoplay() {
  isAutoplaying = !isAutoplaying;
  if (isAutoplaying) {
    startAutoplay();
    playPauseBtn.textContent = '⏸️ 暂停';
    playPauseBtn.setAttribute('aria-label', '暂停自动播放');
  } else {
    clearInterval(autoplayInterval);
    playPauseBtn.textContent = '▶️ 播放';
    playPauseBtn.setAttribute('aria-label', '启动自动播放');
  }
}

// 绑定点击事件
playPauseBtn.addEventListener('click', toggleAutoplay);

// 支持键盘操作（回车/空格触发）
playPauseBtn.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    toggleAutoplay();
  }
});

3. WCAG合规要点说明 #

• 语义化按钮：使用<button>标签而非<div>，确保浏览器默认的键盘交互支持
• ARIA标签：通过aria-label明确按钮功能，适配屏幕阅读器
• 状态反馈：切换状态时更新按钮文本和aria-label，让用户清晰感知当前状态
• 键盘可访问：支持回车和空格触发操作，符合键盘导航要求

三、完整整合示例 #

将上述代码整合后，滑块即可实现完整循环自动播放，同时拥有符合WCAG标准的播放/暂停控制。

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