js 实现图片轮播

2026-02-28 22:15:47JavaScript

实现基础图片轮播

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>

CSS 样式设置定位和过渡效果：

.slider {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.slides {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }

JavaScript 核心逻辑

获取DOM元素并初始化变量：

const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentSlide = 0;
const totalSlides = slides.length;

实现滑动函数和按钮事件：

function goToSlide(slideIndex) {
  slides.forEach((slide, idx) => {
    slide.style.transform = `translateX(${100 * (idx - slideIndex)}%)`;
  });
  currentSlide = slideIndex;
}

prevBtn.addEventListener('click', () => {
  currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
  goToSlide(currentSlide);
});

nextBtn.addEventListener('click', () => {
  currentSlide = (currentSlide + 1) % totalSlides;
  goToSlide(currentSlide);
});

自动轮播功能

添加定时器实现自动播放：

let autoPlayInterval;

function startAutoPlay(interval = 3000) {
  autoPlayInterval = setInterval(() => {
    currentSlide = (currentSlide + 1) % totalSlides;
    goToSlide(currentSlide);
  }, interval);
}

function stopAutoPlay() {
  clearInterval(autoPlayInterval);
}

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

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

指示器实现

添加导航圆点指示器：

<div class="dots">
  <span class="dot active" data-slide="0"></span>
  <span class="dot" data-slide="1"></span>
  <span class="dot" data-slide="2"></span>
</div>

CSS样式：

.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dot {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}
.dot.active {
  background: white;
}

JavaScript交互：

js 实现图片轮播

const dots = document.querySelectorAll('.dot');

function updateDots() {
  dots.forEach(dot => dot.classList.remove('active'));
  dots[currentSlide].classList.add('active');
}

dots.forEach(dot => {
  dot.addEventListener('click', () => {
    currentSlide = parseInt(dot.dataset.slide);
    goToSlide(currentSlide);
    updateDots();
  });
});

// 在goToSlide函数末尾调用
updateDots();