<div id="slideshow">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">
  <img src="image3.jpg" alt="图片3">
</div>
// CSS代码
#slideshow {
  position: relative;
  height: 200px;
  overflow: hidden;
}

#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 imgs = document.querySelectorAll("#slideshow img");
var currentIndex = 0;

function showNextImage() {
  imgs[currentIndex].classList.remove("active");
  currentIndex = (currentIndex + 1) % imgs.length;
  imgs[currentIndex].classList.add("active");
}

setInterval(showNextImage, 2000);

 

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。