如何让内容框自动幻灯片

<div id="slide1">
  <!-- 内容块1的内容 -->
</div>

<div id="slide2">
  <!-- 内容块2的内容 -->
</div>

<div id="slide3">
  <!-- 内容块3的内容 -->
</div>

#slide-container {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

var slides = document.getElementsByClassName('slide');
var currentSlide = 0;

function showSlide(slideIndex) {
  // 隐藏当前显示的内容块
  slides[currentSlide].style.display = 'none';
  
  // 显示下一个内容块
  slides[slideIndex].style.display = 'block';
  
  // 更新当前显示的内容块索引
  currentSlide = slideIndex;
}

function nextSlide() {
  var nextSlideIndex = (currentSlide + 1) % slides.length;
  showSlide(nextSlideIndex);
}

// 每隔一定时间切换到下一个内容块
setInterval(nextSlide, 3000);