如何使用HTML/CSS和Javascript创建定时幻灯片

<div id="slideshow">
  <img src="image1.jpg" alt="Slide 1">
  <img src="image2.jpg" alt="Slide 2">
  <img src="image3.jpg" alt="Slide 3">
</div>

#slideshow {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#slideshow img:first-child {
  opacity: 1;
}

var slides = document.querySelectorAll('#slideshow img');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 2000);

function nextSlide() {
  slides[currentSlide].style.opacity = 0;
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].style.opacity = 1;
}