如何为JavaScript图片轮播添加3秒自动播放功能并移除控制控件

const galleryContainer = document.querySelector('.gallery-container');
const galleryItems = document.querySelectorAll('.gallery-item');

class Carousel {
  constructor(container, items) {
    this.carouselContainer = container;
    this.carouselArray = [...items];
    // 初始化后立刻启动自动轮播
    this.autoPlay();
  }

  updateGallery() {
    this.carouselArray.forEach(el => {
      el.classList.remove('gallery-item-1', 'gallery-item-2', 'gallery-item-3', 'gallery-item-4', 'gallery-item-5');
    });

    this.carouselArray.slice(0, 5).forEach((el, i) => {
      el.classList.add(`gallery-item-${i+1}`);
    });
  }

  // 切换到下一张，和原代码点击下一张逻辑一致
  next() {
    this.carouselArray.push(this.carouselArray.shift());
    this.updateGallery();
  }

  // 自动轮播方法，3秒切换一次
  autoPlay() {
    setInterval(() => {
      this.next();
    }, 3000)
  }
}

const exampleCarousel = new Carousel(galleryContainer, galleryItems);

• 移除了所有控件相关逻辑：删除了原代码中setControls、useControls两个方法，删除了全局的控件容器、控件配置相关变量，同时也删掉了添加图片的相关代码，仅保留核心轮播逻辑
• 新增自动切换能力：新增autoPlay方法，内部使用setInterval每3秒调用一次切换逻辑，构造函数初始化时直接启动轮播
• 解决了setInterval不生效的问题：自动轮播逻辑中使用箭头函数绑定this指向轮播实例，避免this指向window导致调用方法报错
• 简化了切换逻辑：原setCurrentState方法是配合按钮点击判断方向用的，现在直接封装为next方法，默认和原下一张切换逻辑保持一致

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