JavaScript 轮播图实现教程：简单易懂的代码示例

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

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>
  <div class='slide'>
    <img src='image4.jpg'>
  </div>
</div>

CSS样式：

.slideshow-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slide.active {
  opacity: 1;
}

JS代码：

var slides = document.getElementsByClassName('slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);

function nextSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

解释：

• 首先，我们获取所有轮播图的元素，即class为'slide'的元素。
• 然后，我们定义一个变量currentSlide来记录当前显示的轮播图。
• 我们使用setInterval函数来设置轮播图的自动播放，每隔5秒调用一次nextSlide函数。
• nextSlide函数先将当前轮播图的active类名删除，然后计算下一个轮播图的索引，再给它添加active类名，实现轮播图的切换。
• 在CSS中，我们设置了轮播图的容器为相对定位，轮播图为绝对定位，并且设置了过渡效果，在JS中通过添加和删除active类名来实现轮播图的淡入淡出。