当前位置：首页 > JavaScript

js 实现图片轮播

2026-01-16 12:19:26JavaScript

基础实现方案

使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片，CSS负责样式布局，JavaScript处理轮播逻辑。

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

.slider {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}
.slider img.active {
  opacity: 1;
}

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">
  <div class="slider-container">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <button class="prev">←</button>
  <button class="next">→</button>
  <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>
</div>

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

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

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

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

dots.forEach(dot => {
  dot.addEventListener('click', () => {
    images[currentIndex].classList.remove('active');
    currentIndex = parseInt(dot.dataset.index);
    images[currentIndex].classList.add('active');
    updateControls();
  });
});

触摸滑动支持

为移动设备添加触摸事件支持，实现手势滑动切换。

const slider = document.querySelector('.slider-container');
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() {
  const threshold = 50;
  if (touchEndX < touchStartX - threshold) {
    showNextImage();
    updateControls();
  }
  if (touchEndX > touchStartX + threshold) {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex - 1 + totalImages) % totalImages;
    images[currentIndex].classList.add('active');
    updateControls();
  }
}

自动播放与暂停

改进自动播放功能，增加鼠标悬停暂停效果。

let autoplayInterval;

function startAutoplay() {
  autoplayInterval = setInterval(() => {
    showNextImage();
    updateControls();
  }, 3000);
}

function stopAutoplay() {
  clearInterval(autoplayInterval);
}

slider.addEventListener('mouseenter', stopAutoplay);
slider.addEventListener('mouseleave', startAutoplay);

startAutoplay();

响应式设计

通过CSS媒体查询使轮播适应不同屏幕尺寸。

@media (max-width: 768px) {
  .slider {
    width: 100%;
    height: 200px;
  }
  .prev, .next {
    display: none;
  }
}

无限循环优化

修改切换逻辑实现无缝无限循环效果，避免最后一页跳转时的生硬感。

js 实现图片轮播

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

  // 预加载下一张图片
  images[nextIndex].classList.add('next');
  setTimeout(() => {
    images[nextIndex].classList.remove('next');
    images[nextIndex].classList.add('active');
    currentIndex = nextIndex;
    updateControls();
  }, 10);
}