当前位置：首页 > JavaScript

原生js实现一个轮播图

2026-03-02 02:47:51JavaScript

实现轮播图的基本思路

轮播图的核心是通过定时或手动切换图片，通常包含图片容器、导航按钮、指示器 dots 等功能。以下是一个基于原生 JavaScript 的简单轮播图实现方案。

原生js实现一个轮播图

HTML 结构

创建一个基本的 HTML 结构，包含图片容器、左右导航按钮和指示器 dots。

原生js实现一个轮播图

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

.slider-container {
  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;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.dot.active {
  background: white;
}

JavaScript 逻辑

通过 JavaScript 实现轮播图的自动切换、手动导航和 dots 点击功能。

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

  let currentIndex = 0;
  let intervalId;

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

  // 更新 dots 状态
  function updateDots() {
    dots.forEach((dot, index) => {
      dot.classList.toggle('active', index === currentIndex);
    });
  }

  // 切换到下一张图片
  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    updateSlider();
  }

  // 切换到上一张图片
  function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    updateSlider();
  }

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

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

  // 绑定按钮事件
  nextBtn.addEventListener('click', () => {
    nextSlide();
    stopAutoSlide();
    startAutoSlide();
  });

  prevBtn.addEventListener('click', () => {
    prevSlide();
    stopAutoSlide();
    startAutoSlide();
  });

  // 绑定 dots 事件
  dots.forEach(dot => {
    dot.addEventListener('click', () => {
      currentIndex = parseInt(dot.getAttribute('data-index'));
      updateSlider();
      stopAutoSlide();
      startAutoSlide();
    });
  });

  // 鼠标悬停时暂停轮播
  sliderContainer.addEventListener('mouseenter', stopAutoSlide);
  sliderContainer.addEventListener('mouseleave', startAutoSlide);

  // 初始化自动轮播
  startAutoSlide();
});