HTML＋css＋JS轮播图

以下是一个基于 HTML、CSS 和 JavaScript 的简单轮播图示例：

HTML 代码：

<div class="slider-container">
  <div class="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <a class="prev" onclick="changeSlide(-1)">&#10094;</a>
  <a class="next" onclick="changeSlide(1)">&#10095;</a>
</div>

CSS 代码：

.slider-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}
.slider img {
  float: left;
  width: 33.33333333%;
  height: 100%;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
.prev {
  left: 0;
}
.next {
  right: 0;
}

JavaScript 代码：

var slideIndex = 1;
showSlide(slideIndex);

function changeSlide(n) {
  showSlide(slideIndex += n);
}

function showSlide(n) {
  var slides = document.getElementsByClassName("slider")[0].getElementsByTagName("img");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "block";
}

在示例中，轮播图被包裹在一个容器元素 `.slider-container` 中，其中 `.slider` 是包含了所有要轮播的图片的元素，`.prev` 和 `.next` 是分别代表向前和向后切换的按钮。CSS 中，`.slider` 使用了 `position: absolute` 和 `width: 300%` 来让里面的图片元素能够水平排列在一起，并且通过 `transition` 实现了切换时的动画效果。JavaScript 中，`showSlide` 函数实现了切换图片时的逻辑，`changeSlide` 函数则是在点击按钮时触发的切换事件。