当前位置：首页 > JavaScript

js实现图片轮播教程

2026-03-01 19:56:48JavaScript

基础HTML结构

创建一个包含图片列表的容器，并添加导航按钮：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" alt="Slide 1">
    <img src="image2.jpg" alt="Slide 2">
    <img src="image3.jpg" alt="Slide 3">
  </div>
  <button class="prev">❮</button>
  <button class="next">❯</button>
</div>

CSS样式设置

使用CSS实现横向排列和隐藏非活动幻灯片：

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

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

.slides img {
  width: 100%;
  flex-shrink: 0;
}

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

.prev { left: 10px; }
.next { right: 10px; }

JavaScript核心功能

实现自动轮播和手动导航功能：

document.addEventListener('DOMContentLoaded', function() {
  const slides = document.querySelector('.slides');
  const images = document.querySelectorAll('.slides img');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');

  let currentIndex = 0;
  const totalImages = images.length;

  function updateSlide() {
    slides.style.transform = `translateX(-${currentIndex * 100}%)`;
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % totalImages;
    updateSlide();
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + totalImages) % totalImages;
    updateSlide();
  }

  nextBtn.addEventListener('click', nextSlide);
  prevBtn.addEventListener('click', prevSlide);

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

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

添加指示器

在HTML中添加指示器容器：

<div class="indicators"></div>

更新JavaScript添加指示器功能：

const indicators = document.querySelector('.indicators');

// 创建指示器
for (let i = 0; i < totalImages; i++) {
  const dot = document.createElement('span');
  dot.classList.add('dot');
  if (i === 0) dot.classList.add('active');
  dot.addEventListener('click', () => {
    currentIndex = i;
    updateSlide();
    updateDots();
  });
  indicators.appendChild(dot);
}

function updateDots() {
  const dots = document.querySelectorAll('.dot');
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === currentIndex);
  });
}

// 在updateSlide函数末尾调用updateDots

响应式处理

添加窗口大小变化时的处理：

window.addEventListener('resize', () => {
  slides.style.transition = 'none';
  updateSlide();
  setTimeout(() => slides.style.transition = 'transform 0.5s ease');
});

触摸支持

添加移动端触摸事件处理：

let touchStartX = 0;
let touchEndX = 0;

slides.addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
});

slides.addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
});

function handleSwipe() {
  if (touchEndX < touchStartX - 50) nextSlide();
  if (touchEndX > touchStartX + 50) prevSlide();
}

js实现图片轮播教程