当前位置：首页 > JavaScript

js原生代码实现轮播

2026-01-30 12:24:42JavaScript

实现轮播图的基本思路

轮播图的核心是通过定时切换图片或内容，通常结合左右箭头和指示点（小圆点）实现交互。以下是基于原生JavaScript的实现方法，不依赖第三方库。

HTML结构

构建一个包含图片容器、左右箭头和指示点的基本结构：

<div class="slider">
  <div class="slider-container">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <button class="prev-btn">&lt;</button>
  <button class="next-btn">&gt;</button>
  <div class="dots">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS样式

为轮播图添加基础样式，确保图片水平排列且每次只显示一张：

.slider {
  position: relative;
  width: 600px;
  margin: auto;
  overflow: hidden;
}
.slider-container {
  display: flex;
  transition: transform 0.5s ease;
}
.slider-container img {
  width: 100%;
  flex-shrink: 0;
  display: none;
}
.slider-container img.active {
  display: block;
}
.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;
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }
.dots {
  text-align: center;
  margin-top: 10px;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bbb;
  margin: 0 5px;
  cursor: pointer;
}
.dot.active {
  background: #333;
}

JavaScript逻辑

通过DOM操作和定时器实现自动轮播及手动切换功能：

document.addEventListener('DOMContentLoaded', function() {
  const container = document.querySelector('.slider-container');
  const slides = document.querySelectorAll('.slider-container img');
  const dots = document.querySelectorAll('.dot');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  let currentIndex = 0;
  let intervalId;

  // 切换到指定索引的幻灯片
  function goToSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.toggle('active', i === index);
    });
    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === index);
    });
    currentIndex = index;
  }

  // 下一张幻灯片
  function nextSlide() {
    const newIndex = (currentIndex + 1) % slides.length;
    goToSlide(newIndex);
  }

  // 上一张幻灯片
  function prevSlide() {
    const newIndex = (currentIndex - 1 + slides.length) % slides.length;
    goToSlide(newIndex);
  }

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

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

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

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

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

  // 鼠标悬停时暂停轮播
  container.addEventListener('mouseenter', stopAutoPlay);
  container.addEventListener('mouseleave', startAutoPlay);

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

平滑过渡效果（可选）

若需实现滑动动画效果，可修改CSS和JavaScript逻辑：

.slider-container {
  display: flex;
  transition: transform 0.5s ease;
}
.slider-container img {
  width: 100%;
  flex-shrink: 0;
}

function goToSlide(index) {
  container.style.transform = `translateX(-${index * 100}%)`;
  dots.forEach((dot, i) => {
    dot.classList.toggle('active', i === index);
  });
  currentIndex = index;
}

响应式设计（可选）

通过监听窗口大小变化调整轮播图尺寸：

js原生代码实现轮播

window.addEventListener('resize', function() {
  const sliderWidth = document.querySelector('.slider').offsetWidth;
  slides.forEach(slide => {
    slide.style.width = `${sliderWidth}px`;
  });
});

以上代码实现了完整的轮播图功能，包括自动播放、手动切换、指示点导航和悬停暂停。可根据实际需求调整时间间隔、动画效果或布局样式。