原生js实现一个轮播图

实现基础结构

HTML部分需要创建一个容器，包含轮播图片列表和导航按钮：

<div class="slider-container">
  <div class="slider">
    <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: 600px;
  height: 400px;
  margin: auto;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  height: 400px;
  object-fit: cover;
}

.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

.dots-container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #bbb;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background: #333;
}

JavaScript核心功能

实现轮播逻辑和事件处理：

document.addEventListener('DOMContentLoaded', function() {
  const slider = document.querySelector('.slider');
  const slides = document.querySelectorAll('.slide');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  const dotsContainer = document.querySelector('.dots-container');

  let currentIndex = 0;
  const totalSlides = slides.length;

  // 创建指示点
  slides.forEach((_, index) => {
    const dot = document.createElement('div');
    dot.classList.add('dot');
    if(index === 0) dot.classList.add('active');
    dot.addEventListener('click', () => goToSlide(index));
    dotsContainer.appendChild(dot);
  });

  const dots = document.querySelectorAll('.dot');

  // 更新轮播位置和活动状态
  function updateSlider() {
    slider.style.transform = `translateX(-${currentIndex * 100}%)`;

    slides.forEach(slide => slide.classList.remove('active'));
    slides[currentIndex].classList.add('active');

    dots.forEach(dot => dot.classList.remove('active'));
    dots[currentIndex].classList.add('active');
  }

  // 跳转到指定幻灯片
  function goToSlide(index) {
    currentIndex = (index + totalSlides) % totalSlides;
    updateSlider();
  }

  // 下一张
  function nextSlide() {
    goToSlide(currentIndex + 1);
  }

  // 上一张
  function prevSlide() {
    goToSlide(currentIndex - 1);
  }

  // 按钮事件
  nextBtn.addEventListener('click', nextSlide);
  prevBtn.addEventListener('click', prevSlide);

  // 自动轮播
  let interval = setInterval(nextSlide, 3000);

  // 鼠标悬停暂停
  slider.addEventListener('mouseenter', () => clearInterval(interval));
  slider.addEventListener('mouseleave', () => {
    interval = setInterval(nextSlide, 3000);
  });
});

添加触摸支持

为移动设备添加触摸事件处理：

let touchStartX = 0;
let touchEndX = 0;

slider.addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
  clearInterval(interval);
});

slider.addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
  interval = setInterval(nextSlide, 3000);
});

function handleSwipe() {
  const threshold = 50;
  if (touchEndX < touchStartX - threshold) {
    nextSlide();
  } else if (touchEndX > touchStartX + threshold) {
    prevSlide();
  }
}

响应式调整

添加窗口大小变化的处理：

function resizeHandler() {
  const container = document.querySelector('.slider-container');
  const slides = document.querySelectorAll('.slide');

  container.style.height = `${container.offsetWidth * 0.666}px`;
  slides.forEach(slide => {
    slide.style.height = `${container.offsetWidth * 0.666}px`;
  });
}

window.addEventListener('resize', resizeHandler);
resizeHandler();

无限循环优化

修改跳转逻辑实现无缝循环：

function goToSlide(index) {
  currentIndex = (index + totalSlides) % totalSlides;

  // 添加过渡效果
  slider.style.transition = 'transform 0.5s ease';

  // 处理边界情况
  if (currentIndex === totalSlides - 1) {
    setTimeout(() => {
      slider.style.transition = 'none';
      currentIndex = 0;
      slider.style.transform = `translateX(0)`;
    }, 500);
  } else if (currentIndex === 0) {
    setTimeout(() => {
      slider.style.transition = 'none';
      currentIndex = totalSlides - 2;
      slider.style.transform = `translateX(-${currentIndex * 100}%)`;
    }, 500);
  }

  updateSlider();
}