javascript 手写轮播幻灯片JS特效代码

纯手工编写的这个代码来实现一个简单的幻灯片轮播，点击左右箭头按钮可以切换幻灯片。其中，slideTo函数用于切换到指定的幻灯片，prevSlide函数和nextSlide函数分别用于切换到上一个和下一个幻灯片。

以下是一个简单的幻灯片轮播的JavaScript代码：

HTML结构：

<div class="slider">
  <div class="slider-container">
    <img src="slide1.jpg" alt="slide1">
    <img src="slide2.jpg" alt="slide2">
    <img src="slide3.jpg" alt="slide3">
  </div>
  <button class="prev-btn">&lt;</button>
  <button class="next-btn">&gt;</button>
</div>

CSS样式：

.slider {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.slider-container {
  position: absolute;
  width: 300%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  transition: all 0.5s ease-in-out;
}

.slider-container img {
  width: 33.333%;
  height: 100%;
  object-fit: cover;
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24px;
  border: none;
  cursor: pointer;
}

.prev-btn {
  left: 0;
}

.next-btn {
  right: 0;
}

JavaScript代码：

const slider = document.querySelector('.slider');
const sliderContainer = document.querySelector('.slider-container');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const slideWidth = slider.clientWidth / 3;
let currentIndex = 0;

function slideTo(index) {
  currentIndex = index;
  sliderContainer.style.transform = `translateX(${-slideWidth * currentIndex}px)`;
}

function prevSlide() {
  if (currentIndex === 0) {
    slideTo(2);
  } else {
    slideTo(currentIndex - 1);
  }
}

function nextSlide() {
  if (currentIndex === 2) {
    slideTo(0);
  } else {
    slideTo(currentIndex + 1);
  }
}

prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);