js实现无缝轮播

实现无缝轮播的基本思路

无缝轮播的核心在于当轮播到达最后一张时，能够平滑过渡到第一张，反之亦然。通过动态调整轮播元素的位置和样式，可以创建视觉上的无缝效果。

HTML结构准备

创建一个基本的轮播容器，包含图片列表和导航按钮：

<div class="carousel-container">
  <div class="carousel-track">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="prev-btn">Previous</button>
  <button class="next-btn">Next</button>
</div>

CSS样式设置

设置轮播容器和轨道的样式，确保溢出隐藏和水平排列：

.carousel-container {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}

.carousel-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

JavaScript实现逻辑

初始化变量并克隆首尾元素实现无缝效果：

const track = document.querySelector('.carousel-track');
const slides = Array.from(track.children);
const nextButton = document.querySelector('.next-btn');
const prevButton = document.querySelector('.prev-btn');

const cloneFirst = slides[0].cloneNode(true);
const cloneLast = slides[slides.length - 1].cloneNode(true);
track.appendChild(cloneFirst);
track.insertBefore(cloneLast, slides[0]);

let currentIndex = 1;
const slideWidth = slides[0].getBoundingClientRect().width;
track.style.transform = `translateX(${-currentIndex * slideWidth}px)`;

处理导航按钮点击

实现向前和向后滑动逻辑，并在边界时进行无缝跳转：

nextButton.addEventListener('click', () => {
  if (currentIndex >= slides.length) return;
  currentIndex++;
  track.style.transition = 'transform 0.5s ease';
  track.style.transform = `translateX(${-currentIndex * slideWidth}px)`;

  if (currentIndex === slides.length) {
    setTimeout(() => {
      track.style.transition = 'none';
      currentIndex = 1;
      track.style.transform = `translateX(${-currentIndex * slideWidth}px)`;
    }, 500);
  }
});

prevButton.addEventListener('click', () => {
  if (currentIndex <= 0) return;
  currentIndex--;
  track.style.transition = 'transform 0.5s ease';
  track.style.transform = `translateX(${-currentIndex * slideWidth}px)`;

  if (currentIndex === 0) {
    setTimeout(() => {
      track.style.transition = 'none';
      currentIndex = slides.length - 1;
      track.style.transform = `translateX(${-currentIndex * slideWidth}px)`;
    }, 500);
  }
});

自动轮播功能

添加定时器实现自动轮播效果：

let autoPlay = setInterval(() => {
  nextButton.click();
}, 3000);

// 鼠标悬停时暂停自动轮播
track.parentElement.addEventListener('mouseenter', () => {
  clearInterval(autoPlay);
});

track.parentElement.addEventListener('mouseleave', () => {
  autoPlay = setInterval(() => {
    nextButton.click();
  }, 3000);
});

响应式设计考虑

监听窗口大小变化，调整轮播位置：

window.addEventListener('resize', () => {
  slideWidth = slides[0].getBoundingClientRect().width;
  track.style.transform = `translateX(${-currentIndex * slideWidth}px)`;
});

触摸事件支持

为移动设备添加触摸支持：

let startX, moveX;
track.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  clearInterval(autoPlay);
});

track.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].clientX;
  const diff = moveX - startX;
  track.style.transition = 'none';
  track.style.transform = `translateX(${-currentIndex * slideWidth + diff}px)`;
});

track.addEventListener('touchend', () => {
  const threshold = slideWidth / 4;
  const diff = moveX - startX;

  if (diff > threshold) {
    prevButton.click();
  } else if (diff < -threshold) {
    nextButton.click();
  } else {
    track.style.transition = 'transform 0.5s ease';
    track.style.transform = `translateX(${-currentIndex * slideWidth}px)`;
  }

  autoPlay = setInterval(() => {
    nextButton.click();
  }, 3000);
});