当前位置：首页 > JavaScript

js 实现轮播

2026-03-02 07:52:30JavaScript

实现轮播的基本思路

轮播图通常由图片容器、左右切换按钮和指示器组成。核心逻辑是通过定时或手动切换显示不同的图片，同时更新指示器状态。

HTML 结构

创建一个基本的轮播图 HTML 结构，包含图片容器、导航按钮和指示器：

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">&#10094;</button>
  <button class="next">&#10095;</button>
  <div class="dots">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS 样式

为轮播图添加基本样式，确保每次只显示一张图片：

js 实现轮播

.slider {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
}

.slider-container {
  display: flex;
}

.slide {
  width: 100%;
  display: none;
}

.slide.active {
  display: block;
}

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

.next {
  right: 0;
}

.dots {
  text-align: center;
  margin-top: 10px;
}

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

.dot.active {
  background: #333;
}

JavaScript 实现

通过 JavaScript 实现轮播功能，包括自动轮播和手动切换：

document.addEventListener('DOMContentLoaded', function() {
  const slides = document.querySelectorAll('.slide');
  const dots = document.querySelectorAll('.dot');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');
  let currentIndex = 0;
  let interval;

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

  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    showSlide(currentIndex);
  }

  function startAutoSlide() {
    interval = setInterval(nextSlide, 3000);
  }

  function stopAutoSlide() {
    clearInterval(interval);
  }

  nextBtn.addEventListener('click', () => {
    nextSlide();
    stopAutoSlide();
    startAutoSlide();
  });

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

  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      showSlide(index);
      stopAutoSlide();
      startAutoSlide();
    });
  });

  startAutoSlide();
});