HTML实现轮播图滚动图片

HTML和CSS结合可以很容易地创建一个简单的轮播图，滚动显示图片。这里是一个基础的实现方法：

1. **HTML结构**:

<div class="carousel-container">
  <div class="carousel-slide">
    <img src="image1.jpg" alt="Slide 1">
  </div>
  <div class="carousel-slide">
    <img src="image2.jpg" alt="Slide 2">
  </div>
  <!-- 添加更多滑动图片 -->
</div>

2. **CSS样式**:

.carousel-container {
  width: 100%;
  overflow: hidden;
}

.carousel-slide {
  display: none; /* 隐藏所有图片，初始时只显示第一个 */
  position: relative;
}

.carousel-slide.active {
  display: block; /* 当前显示的图片 */
}

3. **JavaScript (可选，添加滑动效果)**:

let slideIndex = 0;
showSlides();

function showSlides() {
  let i;
  const slides = document.getElementsByClassName("carousel-slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none"; // 隐藏所有
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1} // 循环处理
  slides[slideIndex-1].style.display = "block"; // 显示当前图片
  setTimeout(showSlides, 3000); // 每隔3秒切换到下一张图片
}

要运行这个代码，你需要将图片路径替换为实际的图片文件，并在HTML文档中引入上述CSS和JavaScript。