js实现图片轮播教程

2026-01-31 04:47:22JavaScript

实现基础图片轮播

HTML结构需包含轮播容器、图片列表及导航按钮：

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

CSS设置基础样式与过渡效果：

.slider {
  position: relative;
  width: 80%;
  margin: auto;
  overflow: hidden;
}
.slides img {
  width: 100%;
  display: none;
}
.slides img.active {
  display: block;
  animation: fade 1.5s;
}
@keyframes fade {
  from {opacity: 0.4}
  to {opacity: 1}
}

核心JavaScript逻辑

初始化变量与自动轮播功能：

let currentSlide = 0;
const slides = document.querySelectorAll('.slides img');
const totalSlides = slides.length;

function showSlide(index) {
  slides.forEach(slide => slide.classList.remove('active'));
  currentSlide = (index + totalSlides) % totalSlides;
  slides[currentSlide].classList.add('active');
}

function autoPlay() {
  showSlide(currentSlide + 1);
  setTimeout(autoPlay, 3000);
}
autoPlay();

添加按钮事件监听：

document.querySelector('.next').addEventListener('click', () => {
  showSlide(currentSlide + 1);
});

document.querySelector('.prev').addEventListener('click', () => {
  showSlide(currentSlide - 1);
});

增强功能实现

添加指示器导航：

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

对应JavaScript交互：

document.querySelectorAll('.dot').forEach(dot => {
  dot.addEventListener('click', (e) => {
    showSlide(parseInt(e.target.dataset.index));
  });
});

function updateDots() {
  document.querySelectorAll('.dot').forEach((dot, i) => {
    dot.classList.toggle('active', i === currentSlide);
  });
}

响应式处理

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

function resizeSlider() {
  const slider = document.querySelector('.slider');
  slider.style.height = `${slider.offsetWidth * 0.6}px`;
}
window.addEventListener('resize', resizeSlider);
resizeSlider();

触摸屏支持

添加触摸事件处理：

let touchStartX = 0;
const slider = document.querySelector('.slider');

slider.addEventListener('touchstart', (e) => {
  touchStartX = e.touches[0].clientX;
});

slider.addEventListener('touchend', (e) => {
  const touchEndX = e.changedTouches[0].clientX;
  if (touchEndX - touchStartX > 50) showSlide(currentSlide - 1);
  if (touchStartX - touchEndX > 50) showSlide(currentSlide + 1);
});

js实现图片轮播教程