当前位置：首页 > JavaScript

js实现图片轮播

2026-01-12 13:07:59JavaScript

实现基础图片轮播

使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片，CSS设置样式和动画效果，JavaScript处理轮播逻辑。

<div class="slider">
  <img src="image1.jpg" class="slide active">
  <img src="image2.jpg" class="slide">
  <img src="image3.jpg" class="slide">
</div>
<button class="prev">Previous</button>
<button class="next">Next</button>

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

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

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

prevBtn.addEventListener('click', () => {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  showSlide(currentSlide);
});

nextBtn.addEventListener('click', () => {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
});

// 自动轮播
setInterval(() => {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
}, 3000);

使用CSS动画实现平滑过渡

通过CSS的transform属性实现更平滑的滑动效果，修改CSS部分如下：

.slider {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}
.slide.active {
  transform: translateX(0);
}
.slide.next {
  transform: translateX(100%);
}
.slide.prev {
  transform: translateX(-100%);
}

JavaScript部分需要更新showSlide函数：

function showSlide(index) {
  slides.forEach(slide => {
    slide.classList.remove('active', 'prev', 'next');
  });

  slides[index].classList.add('active');

  const nextIndex = (index + 1) % slides.length;
  slides[nextIndex].classList.add('next');

  const prevIndex = (index - 1 + slides.length) % slides.length;
  slides[prevIndex].classList.add('prev');
}

响应式轮播实现

确保轮播在不同屏幕尺寸下都能正常显示，添加响应式设计：

.slider {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin: 0 auto;
}

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

JavaScript部分可以添加触摸事件支持：

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) {
    currentSlide = (currentSlide + 1) % slides.length;
    showSlide(currentSlide);
  }
  if (touchEndX > touchStartX + 50) {
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
    showSlide(currentSlide);
  }
}

无限循环轮播优化

实现无缝无限循环效果，需要克隆首尾图片：

// 克隆首尾图片
const firstClone = slides[0].cloneNode(true);
const lastClone = slides[slides.length - 1].cloneNode(true);
firstClone.classList.add('clone');
lastClone.classList.add('clone');
slider.insertBefore(lastClone, slides[0]);
slider.appendChild(firstClone);

// 更新索引计算
function showSlide(index) {
  if (index === -1) {
    index = slides.length - 1;
    slider.style.transition = 'none';
    slider.style.transform = `translateX(-${(slides.length) * 100}%)`;
    setTimeout(() => {
      slider.style.transition = 'transform 0.5s ease-in-out';
      index = slides.length - 1;
      slider.style.transform = `translateX(-${(index) * 100}%)`;
    }, 50);
  }
  // 类似处理超出范围的情况
}

js实现图片轮播