js实现无缝轮播

实现无缝轮播的核心思路

无缝轮播的关键在于当滚动到最后一个元素时，能无感知地跳转回第一个元素，反之亦然。通常通过克隆首尾元素并调整滚动位置实现。

HTML 结构准备

<div class="slider">
  <div class="slider-wrapper">
    <!-- 克隆最后一个元素放在前面 -->
    <div class="slide">Slide 3</div>
    <!-- 原始幻灯片 -->
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
    <!-- 克隆第一个元素放在后面 -->
    <div class="slide">Slide 1</div>
  </div>
</div>

CSS 基础样式

.slider {
  width: 100%;
  overflow: hidden;
}
.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  flex: 0 0 100%;
  min-height: 200px;
}

JavaScript 实现逻辑

const slider = document.querySelector('.slider-wrapper');
let currentIndex = 1;
const slideCount = document.querySelectorAll('.slide').length - 2; // 减去克隆元素

function goToSlide(index) {
  slider.style.transform = `translateX(-${index * 100}%)`;
}

function nextSlide() {
  currentIndex++;
  slider.style.transition = 'transform 0.5s ease';
  goToSlide(currentIndex);

  // 到达克隆的最后一张时无缝跳转
  if (currentIndex === slideCount + 1) {
    setTimeout(() => {
      slider.style.transition = 'none';
      currentIndex = 1;
      goToSlide(currentIndex);
    }, 500);
  }
}

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

// 初始化位置
slider.style.transform = `translateX(-${currentIndex * 100}%)`;

触摸事件支持（可选）

let startX = 0;
let isDragging = false;

slider.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  isDragging = true;
  slider.style.transition = 'none';
});

slider.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const x = e.touches[0].clientX;
  const diff = startX - x;
  slider.style.transform = `translateX(calc(-${currentIndex * 100}% - ${diff}px))`;
});

slider.addEventListener('touchend', (e) => {
  isDragging = false;
  const endX = e.changedTouches[0].clientX;
  const diff = startX - endX;

  // 滑动阈值判断
  if (diff > 50) {
    nextSlide();
  } else if (diff < -50) {
    prevSlide(); // 需实现prevSlide函数
  } else {
    slider.style.transition = 'transform 0.5s ease';
    goToSlide(currentIndex);
  }
});

性能优化建议

使用will-change: transform提升动画性能：

.slider-wrapper {
  will-change: transform;
}

通过requestAnimationFrame优化动画帧：

function animate() {
  requestAnimationFrame(animate);
  // 动画逻辑
}
animate();

响应式处理

监听窗口大小变化时重新计算位置：

window.addEventListener('resize', () => {
  slider.style.transition = 'none';
  goToSlide(currentIndex);
});