纯 JavaScript 实现图片轮播图 - 详细教程和代码示例

以下是使用 JavaScript 实现轮播图的示例代码：

HTML 部分：

<div class='slideshow-container'>
  <div class='slide'>
    <img src='image1.jpg'>
  </div>
  <div class='slide'>
    <img src='image2.jpg'>
  </div>
  <div class='slide'>
    <img src='image3.jpg'>
  </div>
  <a class='prev' onclick='prevSlide()'>&#10094;</a>
  <a class='next' onclick='nextSlide()'>&#10095;</a>
</div>

CSS 部分：

.slideshow-container {
  position: relative;
  width: 100%;
  height: 500px;
}

.slide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  z-index: 1;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

JavaScript 部分：

var slideIndex = 1;
showSlide(slideIndex);

function nextSlide() {
  showSlide(slideIndex += 1);
}

function prevSlide() {
  showSlide(slideIndex -= 1);
}

function showSlide(n) {
  var slides = document.getElementsByClassName('slide');
  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';  
}

解释说明：

1. 在 HTML 中定义轮播图的结构，包括一个容器和多个幻灯片，以及两个按钮。
2. 在 CSS 中设置轮播图的样式，包括容器和幻灯片的位置和尺寸，以及按钮的样式。
3. 在 JavaScript 中定义一个变量 slideIndex，表示当前显示的幻灯片序号，初始值为 1。定义一个函数 showSlide(n)，根据传入的参数 n 显示对应的幻灯片，同时隐藏其他幻灯片。定义两个函数 nextSlide() 和 prevSlide()，分别用于切换到下一个和上一个幻灯片。当 slideIndex 超出幻灯片数量时，将其重置为 1 或最后一个幻灯片的序号。在 showSlide(n) 函数中，将当前幻灯片的 display 属性设置为 'block'，其他幻灯片的 display 属性设置为 'none'，以实现切换幻灯片的效果。

这个示例只是一个简单的轮播图实现，可以根据需要增加更多的功能和效果，例如自动播放、指示器、动画效果等。