如何为自定义JavaScript幻灯片添加自动播放与循环功能？

需求说明 #

现有一款自定义JavaScript幻灯片，需要实现两个核心功能：

1. 循环播放：切换到最后一张后自动回到第一张，第一张切换到上一张时跳转至最后一张
2. 自动播放：每隔固定时间自动切换到下一张，支持鼠标悬停时暂停播放

步骤1：实现循环播放功能 #

修改slide.js中的索引计算和切换方法，让幻灯片支持循环跳转：

1. 更新索引导航逻辑 #

替换Slide类中的slidesIndexNav方法，确保索引始终循环：

slidesIndexNav(index) {
  const last = this.slideArray.length - 1;
  this.index = {
    // 上一张：当前是第一张时，指向最后一张
    prev: index === 0 ? last : index - 1,
    active: index,
    // 下一张：当前是最后一张时，指向第一张
    next: index === last ? 0 : index + 1,
  }
}

2. 修改前后切换方法 #

替换Slide类中的activePrevSlide和activeNextSlide方法，实现循环切换：

activePrevSlide() {
  const targetIndex = this.index.prev;
  this.changeSlide(targetIndex);
}

activeNextSlide() {
  const targetIndex = this.index.next;
  this.changeSlide(targetIndex);
}

步骤2：实现自动播放功能 #

在Slide类中添加自动播放的控制逻辑，同时支持交互暂停：

1. 初始化自动播放配置 #

在Slide类的构造函数中添加自动播放相关属性：

constructor(slide, wrapper) {
  this.slide = document.querySelector(slide)
  this.wrapper = document.querySelector(wrapper);
  this.dist = { finalPosition: 0, startX: 0, movement: 0 }
  this.activeClass = 'active';
  this.changeEvent = new Event('changeEvent');
  // 自动播放间隔（毫秒），可按需调整
  this.autoplayInterval = 3000;
  this.autoplayTimer = null;
}

2. 添加自动播放控制方法 #

在Slide类中新增以下方法：

// 启动自动播放
startAutoplay() {
  this.autoplayTimer = setInterval(() => {
    this.activeNextSlide();
  }, this.autoplayInterval);
}

// 停止自动播放
stopAutoplay() {
  if (this.autoplayTimer) {
    clearInterval(this.autoplayTimer);
    this.autoplayTimer = null;
  }
}

3. 绑定交互事件 #

在bindEvents方法中绑定自动播放的上下文：

bindEvents() {
  this.onStart = this.onStart.bind(this);
  this.onMove = this.onMove.bind(this);
  this.onEnd = this.onEnd.bind(this);

  this.activePrevSlide = this.activePrevSlide.bind(this);
  this.activeNextSlide = this.activeNextSlide.bind(this);

  this.onResize = debounce(this.onResize.bind(this), 200);
  
  // 绑定自动播放方法的上下文
  this.startAutoplay = this.startAutoplay.bind(this);
  this.stopAutoplay = this.stopAutoplay.bind(this);
}

在init方法中添加鼠标悬停/离开的事件监听：

init() {
  this.bindEvents();
  this.transition(true);
  this.addSlideEvents();
  this.slidesConfig();
  this.addResizeEvent();
  this.changeSlide(0);
  
  // 鼠标悬停暂停播放，离开恢复播放
  this.wrapper.addEventListener('mouseenter', this.stopAutoplay);
  this.wrapper.addEventListener('mouseleave', this.startAutoplay);
  
  return this;
}

步骤3：启动自动播放 #

修改script.js，在幻灯片初始化完成后启动自动播放：

import SlideNav from './slide.js';

const slide = new SlideNav('.slide', '.slide-wrapper');
slide.init();
slide.addArrow('.prev', '.next');
slide.addControl('.custom-controls');
// 启动自动播放
slide.startAutoplay();

额外优化：拖拽时暂停自动播放 #

为提升体验，在用户拖拽幻灯片时暂停自动播放，拖拽结束后恢复：
修改onStart方法，添加停止播放逻辑：

onStart(event) {
  let movetype;
  if (event.type === 'mousedown') {
    event.preventDefault();
    this.dist.startX = event.clientX;
    movetype = 'mousemove';
  } else {
    this.dist.startX = event.changedTouches[0].clientX;
    movetype = 'touchmove';
  }
  this.wrapper.addEventListener(movetype, this.onMove);
  this.transition(false);
  // 拖拽开始时暂停自动播放
  this.stopAutoplay();
}

修改onEnd方法，添加恢复播放逻辑：

onEnd(event) {
  const movetype = (event.type === 'mouseup') ? 'mousemove' : 'touchmove';
  this.wrapper.removeEventListener(movetype, this.onMove);
  this.dist.finalPosition = this.dist.movePosition;
  this.transition(true);
  this.changeSlideOnEnd();
  // 拖拽结束后恢复自动播放
  this.startAutoplay();
}

内容的提问来源于stack exchange，提问作者Karl Gin Frank