当前位置：首页 > JavaScript

js实现轮播

2026-01-12 12:48:41JavaScript

实现轮播图的基本思路

轮播图的核心逻辑是通过定时切换展示的图片或内容，通常结合左右滑动按钮和指示器（小圆点）增强交互性。以下是基于原生JavaScript的实现方法。

HTML结构

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

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" class="slide active">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
  <button class="prev">❮</button>
  <button class="next">❯</button>
  <div class="dots">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS样式

为轮播图添加基础样式，确保图片切换时的平滑过渡效果：

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

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

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

.slide.active {
  display: block;
}

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

.next {
  right: 0;
}

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

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

.dot.active {
  background-color: #333;
}

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 intervalId;

  // 切换到指定索引的幻灯片
  function goToSlide(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 startAutoPlay() {
    intervalId = setInterval(() => {
      const nextIndex = (currentIndex + 1) % slides.length;
      goToSlide(nextIndex);
    }, 3000);
  }

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

  // 初始化
  goToSlide(0);
  startAutoPlay();

  // 事件监听
  prevBtn.addEventListener('click', () => {
    stopAutoPlay();
    const prevIndex = (currentIndex - 1 + slides.length) % slides.length;
    goToSlide(prevIndex);
    startAutoPlay();
  });

  nextBtn.addEventListener('click', () => {
    stopAutoPlay();
    const nextIndex = (currentIndex + 1) % slides.length;
    goToSlide(nextIndex);
    startAutoPlay();
  });

  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      stopAutoPlay();
      goToSlide(index);
      startAutoPlay();
    });
  });

  // 鼠标悬停暂停轮播
  document.querySelector('.slider').addEventListener('mouseenter', stopAutoPlay);
  document.querySelector('.slider').addEventListener('mouseleave', startAutoPlay);
});