当前位置：首页 > JavaScript

js实现图片轮播教程

2026-04-04 20:44:14JavaScript

基础图片轮播实现

使用HTML、CSS和JavaScript实现一个简单的图片轮播效果。HTML结构包含一个容器和多个图片元素。

<div class="slider">
  <img src="image1.jpg" class="active">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

CSS样式控制图片显示和隐藏：

.slider {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

JavaScript实现自动轮播逻辑：

let currentIndex = 0;
const images = document.querySelectorAll('.slider img');
const totalImages = images.length;

function showNextImage() {
  images[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % totalImages;
  images[currentIndex].classList.add('active');
}

setInterval(showNextImage, 3000);

添加导航控制

为轮播添加前进和后退按钮，增强用户交互体验。

HTML添加导航按钮：

<div class="slider">
  <!-- 图片元素 -->
  <button class="prev">❮</button>
  <button class="next">❯</button>
</div>

JavaScript扩展控制功能：

const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

prevBtn.addEventListener('click', () => {
  images[currentIndex].classList.remove('active');
  currentIndex = (currentIndex - 1 + totalImages) % totalImages;
  images[currentIndex].classList.add('active');
});

nextBtn.addEventListener('click', () => {
  showNextImage();
});

指示器实现

添加小圆点指示器显示当前图片位置。

js实现图片轮播教程

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', () => goToImage(i));
  indicators.appendChild(dot);
}

function goToImage(index) {
  images[currentIndex].classList.remove('active');
  document.querySelector('.dot.active').classList.remove('active');
  currentIndex = index;
  images[currentIndex].classList.add('active');
  document.querySelectorAll('.dot')[currentIndex].classList.add('active');
}

触摸滑动支持

为移动设备添加触摸滑动支持。

JavaScript添加触摸事件处理：

js实现图片轮播教程

let touchStartX = 0;
let touchEndX = 0;

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

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

function handleSwipe() {
  if (touchEndX < touchStartX - 50) {
    showNextImage();
  }
  if (touchEndX > touchStartX + 50) {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex - 1 + totalImages) % totalImages;
    images[currentIndex].classList.add('active');
  }
}

响应式设计

确保轮播在不同屏幕尺寸下正常显示。

CSS添加响应式规则：

@media (max-width: 768px) {
  .slider {
    width: 100%;
    height: 200px;
  }
}

@media (max-width: 480px) {
  .slider {
    height: 150px;
  }
}

性能优化

优化图片加载和轮播性能。

JavaScript预加载图片：

window.addEventListener('load', () => {
  images.forEach(img => {
    const tempImg = new Image();
    tempImg.src = img.src;
  });
});

添加暂停自动轮播功能：

let slideInterval = setInterval(showNextImage, 3000);

slider.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

slider.addEventListener('mouseleave', () => {
  slideInterval = setInterval(showNextImage, 3000);
});