如何实现轮播图js

2026-04-04 20:30:02JavaScript

实现轮播图的 JavaScript 方法

基础 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: 600px;
  height: 400px;
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.slide.active {
  opacity: 1;
}

JavaScript 核心逻辑

通过定时器和事件监听实现自动播放与手动切换：

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');

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');
}

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

document.querySelector('.next').addEventListener('click', nextSlide);
document.querySelector('.prev').addEventListener('click', () => {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  showSlide(currentSlide);
});

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

// 自动轮播
let interval = setInterval(nextSlide, 3000);

// 鼠标悬停暂停
document.querySelector('.slider').addEventListener('mouseenter', () => {
  clearInterval(interval);
});
document.querySelector('.slider').addEventListener('mouseleave', () => {
  interval = setInterval(nextSlide, 3000);
});

响应式设计扩展

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

window.addEventListener('resize', () => {
  const slider = document.querySelector('.slider');
  slider.style.width = `${window.innerWidth * 0.8}px`;
});

动画效果增强

使用 CSS transform 实现滑动动画（替换 opacity 过渡）：

.slide {
  transform: translateX(100%);
  transition: transform 0.5s ease;
}
.slide.active {
  transform: translateX(0);
}
.slide.prev {
  transform: translateX(-100%);
}

无限循环优化

克隆首尾图片实现无缝循环：

如何实现轮播图js

const slidesContainer = document.querySelector('.slides');
const firstClone = slides[0].cloneNode(true);
const lastClone = slides[slides.length - 1].cloneNode(true);
slidesContainer.appendChild(firstClone);
slidesContainer.insertBefore(lastClone, slides[0]);