http网页中定时切换照片的代码

以下是一个基本的定时切换照片的代码示例：

HTML:

<div id="slideshow">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
</div>

CSS:

#slideshow {
  position: relative;
  width: 100%;
  height: 400px;
}

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

#slideshow img.active {
  opacity: 1;
}

JavaScript:

var images = document.querySelectorAll("#slideshow img");
var currentImage = 0;
var slideInterval = setInterval(nextImage, 3000);

function nextImage() {
  images[currentImage].classList.remove("active");
  currentImage++;
  if (currentImage >= images.length) {
    currentImage = 0;
  }
  images[currentImage].classList.add("active");
}

这个代码将在 slideshow 元素中显示三张图片，并每三秒钟自动切换到下一张图片。CSS 将所有图片定位到相同的位置并使它们不可见，直到它们被标记为 active。JavaScript 将轮流标记每个图像，并将 active 类添加到当前图像，使其可见。setInterval 函数将每隔三秒钟调用 nextImage 函数