原生js实现轮播图

基本结构搭建

HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下：

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg" class="slide active">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
  <button class="prev-btn">&lt;</button>
  <button class="next-btn">&gt;</button>
  <div class="dots-container"></div>
</div>

CSS样式设置

确保轮播图容器设置为相对定位，图片设置为绝对定位并通过透明度切换显示：

.slider-container {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s;
}
.slide.active {
  opacity: 1;
}

核心JavaScript逻辑

初始化变量并获取DOM元素：

const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let currentIndex = 0;

实现图片切换函数：

function showSlide(index) {
  slides.forEach(slide => slide.classList.remove('active'));
  slides[index].classList.add('active');
}

添加按钮事件监听：

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
});

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  showSlide(currentIndex);
});

自动轮播功能

通过定时器实现自动播放：

let interval = setInterval(() => {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}, 3000);

// 鼠标悬停时暂停
document.querySelector('.slider-container').addEventListener('mouseenter', () => {
  clearInterval(interval);
});

// 鼠标离开时恢复
document.querySelector('.slider-container').addEventListener('mouseleave', () => {
  interval = setInterval(() => {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
  }, 3000);
});

指示器实现

动态生成指示点并添加交互：

const dotsContainer = document.querySelector('.dots-container');
slides.forEach((_, idx) => {
  const dot = document.createElement('span');
  dot.classList.add('dot');
  if (idx === 0) dot.classList.add('active');
  dot.addEventListener('click', () => {
    currentIndex = idx;
    showSlide(currentIndex);
    updateDots();
  });
  dotsContainer.appendChild(dot);
});

function updateDots() {
  document.querySelectorAll('.dot').forEach((dot, idx) => {
    dot.classList.toggle('active', idx === currentIndex);
  });
}

触摸事件支持

添加移动端触摸支持：

let touchStartX = 0;
let touchEndX = 0;

document.querySelector('.slider-wrapper').addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
});

document.querySelector('.slider-wrapper').addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
});

function handleSwipe() {
  if (touchEndX < touchStartX - 50) {
    currentIndex = (currentIndex + 1) % slides.length;
  } else if (touchEndX > touchStartX + 50) {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  }
  showSlide(currentIndex);
  updateDots();
}