原生js实现自动轮播图

可以使用 setInterval 和 clearInterval 函数实现自动轮播图。具体的实现代码如下：

let sliderIndex = 0;
let sliderIntervalId = null;
const sliders = document.querySelectorAll('.slider-item');

function displaySlider(index) {
  sliders.forEach((slider, i) => {
    if (i === index) {
      slider.style.display = 'block';
    } else {
      slider.style.display = 'none';
    }
  });
}

function startSlider() {
  sliderIntervalId = setInterval(() => {
    sliderIndex = (sliderIndex + 1) % sliders.length;
    displaySlider(sliderIndex);
  }, 3000);
}

function stopSlider() {
  if (sliderIntervalId) {
    clearInterval(sliderIntervalId);
    sliderIntervalId = null;
  }
}

displaySlider(sliderIndex);
startSlider();

这段代码实现了一个自动轮播图，每隔 3 秒钟自动切换到下一张轮播图，并且在鼠标悬停在轮播图上的时候停止自动轮播，鼠标离开的时候继续轮播。