如何显示自动幻灯片

<div class="slide">
  <!-- 幻灯片内容 -->
</div>
<div class="slide">
  <!-- 幻灯片内容 -->
</div>
<div class="slide">
  <!-- 幻灯片内容 -->
</div>

.slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slideAnimation 5s infinite;
}

@keyframes slideAnimation {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

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

function showSlide(index) {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
  }
  slides[index].style.display = 'block';
}

function nextSlide() {
  currentSlide++;
  if (currentSlide >= slides.length) {
    currentSlide = 0;
  }
  showSlide(currentSlide);
}

setInterval(nextSlide, 5000); // 每隔5秒切换到下一张幻灯片