纯 JavaScript 实现图片轮播效果：代码示例和解析

纯 JavaScript 图片轮播效果：代码示例和解析

这篇文章将带您使用纯 JavaScript 代码实现一个简单的图片轮播效果。

HTML 代码

<div class='slider'>
  <img src='img1.jpg' alt='Slide 1' class='slide'>
  <img src='img2.jpg' alt='Slide 2' class='slide'>
  <img src='img3.jpg' alt='Slide 3' class='slide'>
  <img src='img4.jpg' alt='Slide 4' class='slide'>
  <img src='img5.jpg' alt='Slide 5' class='slide'>
  <div class='prev'></div>
  <div class='next'></div>
</div>

CSS 代码

.slider {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slide.active {
  opacity: 1;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.prev:hover, .next:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.prev:before, .next:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-top: 2px solid #333;
  border-left: 2px solid #333;
  transition: transform 0.3s ease-in-out;
}
.prev:hover:before, .next:hover:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.next:before {
  transform: translate(-50%, -50%) rotate(180deg);
}

JavaScript 代码

var sliderIndex = 0;
var slides = document.getElementsByClassName('slide');
var prev = document.getElementsByClassName('prev')[0];
var next = document.getElementsByClassName('next')[0];

showSlide(sliderIndex);

function showSlide(index) {
  if (index < 0) {
    index = slides.length - 1;
  } else if (index >= slides.length) {
    index = 0;
  }
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
  }
  slides[index].classList.add('active');
}

prev.addEventListener('click', function() {
  sliderIndex--;
  showSlide(sliderIndex);
});

next.addEventListener('click', function() {
  sliderIndex++;
  showSlide(sliderIndex);
});

setInterval(function() {
  sliderIndex++;
  showSlide(sliderIndex);
}, 5000);

代码解释

1. HTML 结构： 创建一个包含所有幻灯片图片的 slider 容器，以及两个用于控制上一张和下一张的按钮元素 prev 和 next。
2. CSS 样式： 使用 CSS 定义 slider 容器、幻灯片图片和按钮的样式，包括位置、尺寸、透明度、过渡效果等。
3. JavaScript 逻辑：
   • 定义 sliderIndex 变量记录当前幻灯片的索引值。
   • 获取所有幻灯片元素和按钮元素。
   • 定义 showSlide 函数，用于控制幻灯片的显示。
   • 为按钮添加点击事件监听，在点击时更新 sliderIndex 并调用 showSlide 函数。
   • 使用 setInterval 函数自动切换幻灯片。

通过以上步骤，即可实现一个简单的图片轮播效果。您可以根据实际需求调整代码，例如添加更多的幻灯片、修改轮播速度、添加指示器等。

希望这篇文章对您有所帮助，祝您编码愉快！