编写轮播图代码

以下是一个简单的轮播图代码示例：

HTML代码：

<div class="slider">
  <div class="slider-item active">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="slider-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="slider-item">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS代码：

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.slider-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.slider-item.active {
  opacity: 1;
}

JavaScript代码：

let slideIndex = 0;
showSlides();

function showSlides() {
  let slides = document.getElementsByClassName("slider-item");
  for (let i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex - 1].classList.add("active");
  setTimeout(showSlides, 5000); // 切换时间间隔为5秒
}

说明：

• HTML代码中，轮播图的图片用<img>标签来展示，每个图片都被包裹在一个<div>元素中，每个<div>元素都有一个slider-item类名。
• CSS代码中，.slider元素用来设置轮播图的宽度、高度和溢出隐藏。.slider-item元素用来设置每个图片的位置和透明度，.slider-item.active用来设置当前显示图片的透明度为1。
• JavaScript代码中，slideIndex变量用来记录当前显示图片的下标，showSlides()函数用来切换图片。首先获取所有的slider-item元素，然后将它们的active类名都移除。接着将slideIndex加1，如果slideIndex大于图片数量，就将其重置为1。最后给当前显示的图片添加active类名。最后用setTimeout()函数来设置定时器，每过5秒钟就切换一张图片。