原生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>
  <div class="slider-controls">
    <button class="prev">←</button>
    <button class="next">→</button>
  </div>
  <div class="slider-dots">
    <span class="dot active" data-index="0"></span>
    <span class="dot" data-index="1"></span>
    <span class="dot" data-index="2"></span>
  </div>
</div>

CSS 样式

.slider-container {
  position: relative;
  width: 800px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}

.slider {
  display: flex;
  width: 100%;
  height: 100%;
}

.slide {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.slider-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.slider-controls button {
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}

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

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  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');
  const nextBtn = document.querySelector('.next');
  const dots = document.querySelectorAll('.dot');

  let currentIndex = 0;
  const slideCount = slides.length;
  let intervalId;

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

    // 更新小圆点状态
    dots.forEach(dot => dot.classList.remove('active'));
    dots[currentIndex].classList.add('active');
  }

  // 下一张
  function nextSlide() {
    currentIndex = (currentIndex + 1) % slideCount;
    updateSlider();
  }

  // 上一张
  function prevSlide() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    updateSlider();
  }

  // 自动轮播
  function startAutoPlay() {
    intervalId = setInterval(nextSlide, 3000);
  }

  // 停止自动轮播
  function stopAutoPlay() {
    clearInterval(intervalId);
  }

  // 事件监听
  nextBtn.addEventListener('click', function() {
    nextSlide();
    stopAutoPlay();
    startAutoPlay();
  });

  prevBtn.addEventListener('click', function() {
    prevSlide();
    stopAutoPlay();
    startAutoPlay();
  });

  // 小圆点点击事件
  dots.forEach(dot => {
    dot.addEventListener('click', function() {
      currentIndex = parseInt(this.dataset.index);
      updateSlider();
      stopAutoPlay();
      startAutoPlay();
    });
  });

  // 鼠标悬停停止自动轮播
  slider.addEventListener('mouseenter', stopAutoPlay);
  slider.addEventListener('mouseleave', startAutoPlay);

  // 初始化
  startAutoPlay();
});

功能扩展

1. 无限循环：通过复制首尾图片实现无缝过渡
2. 淡入淡出效果：修改CSS过渡效果为opacity
3. 响应式设计：添加媒体查询调整轮播图尺寸
4. 触摸支持：添加touch事件处理实现移动端滑动切换

注意事项

1. 确保图片路径正确
2. 轮播图容器需要固定宽高
3. 自动轮播间隔时间可根据需求调整
4. 过渡效果时间应与JavaScript定时器协调