自定义Carousel优化需求：实现无限循环、拖拽触摸及悬停暂停

问题概述 #

现有轮播组件可正常运行，但需优化以下功能：

• 仅支持单向滑动，移动端无拖拽/触摸操作
• 实现360°无限循环，避免末尾跳回起始的突兀感
• 鼠标悬停时停止自动播放，同时支持拖拽及移动端触摸响应

优化后的完整代码 #

HTML #

<div class="carousel-container">
  <div class="carousel">
    <!-- 复制首尾元素实现无缝循环 -->
    <div class="carousel-item">Item 7</div>
    <div class="carousel-item">Item 1</div>
    <div class="carousel-item">Item 2</div>
    <div class="carousel-item">Item 3</div>
    <div class="carousel-item">Item 4</div>
    <div class="carousel-item">Item 5</div>
    <div class="carousel-item">Item 6</div>
    <div class="carousel-item">Item 7</div>
    <div class="carousel-item">Item 1</div>
  </div>
  <div class="pagination"></div>
</div>

CSS #

.carousel-container {
  position: relative;
  overflow: hidden;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  user-select: none; /* 防止拖拽时选中文本 */
}

.carousel {
  display: flex;
  transition: transform 0.5s ease;
  cursor: grab; /* 拖拽光标提示 */
}

.carousel:active {
  cursor: grabbing;
}

.carousel-item {
  flex: 0 0 calc(24% - 10px);
  min-width: calc(24% - 10px);
  margin-right: 10px;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.pagination {
  text-align: center;
  margin-top: 10px;
}

.pagination button {
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  cursor: pointer;
}

.pagination button.active {
  background-color: #007bff;
}

JavaScript #

const carousel = document.querySelector(".carousel");
const items = document.querySelectorAll(".carousel-item");
const numVisibleSlides = 4;
const gap = 10;
const originalTotalSlides = items.length - 4; // 减去复制的首尾元素
let currentIndex = numVisibleSlides; // 初始位置设为原第一个元素的位置

// 计算单张幻灯片宽度
const slideWidth = (85 - (numVisibleSlides - 1) * gap) / numVisibleSlides;

// 初始化分页按钮
const pagination = document.querySelector(".pagination");
for (let i = 0; i < originalTotalSlides; i++) {
  const button = document.createElement("button");
  button.classList.add("pagination-button");
  button.addEventListener("click", () => goToSlide(i + numVisibleSlides));
  pagination.appendChild(button);
}

// 更新分页激活状态
function updatePagination() {
  const buttons = document.querySelectorAll(".pagination-button");
  buttons.forEach((button, index) => {
    if (index === currentIndex - numVisibleSlides) {
      button.classList.add("active");
    } else {
      button.classList.remove("active");
    }
  });
}

// 跳转到指定幻灯片
function goToSlide(index) {
  currentIndex = index;
  updateCarousel();
  updatePagination();
}

// 更新轮播位置
function updateCarousel() {
  const translateX = -currentIndex * (slideWidth + gap);
  carousel.style.transform = `translateX(${translateX}%)`;
}

// 无缝循环逻辑
function handleLoop() {
  if (currentIndex >= originalTotalSlides + numVisibleSlides) {
    // 滑到末尾复制元素时，瞬间切换到原起始位置
    carousel.style.transition = "none";
    currentIndex = numVisibleSlides;
    updateCarousel();
    // 重新启用过渡动画
    setTimeout(() => {
      carousel.style.transition = "transform 0.5s ease";
    }, 50);
  } else if (currentIndex < numVisibleSlides) {
    // 滑到开头复制元素时，瞬间切换到原末尾位置
    carousel.style.transition = "none";
    currentIndex = originalTotalSlides + numVisibleSlides - 1;
    updateCarousel();
    setTimeout(() => {
      carousel.style.transition = "transform 0.5s ease";
    }, 50);
  }
}

// 拖拽/触摸事件处理
let isDragging = false;
let startX = 0;
let startTranslate = 0;

function handleDragStart(e) {
  isDragging = true;
  stopAutoPlay();
  // 获取初始触摸/鼠标位置
  startX = e.type.includes("mouse") ? e.pageX : e.touches[0].pageX;
  startTranslate = -currentIndex * (slideWidth + gap);
  carousel.style.transition = "none";
}

function handleDragMove(e) {
  if (!isDragging) return;
  const currentX = e.type.includes("mouse") ? e.pageX : e.touches[0].pageX;
  const diffX = currentX - startX;
  // 转换为百分比偏移
  const containerWidth = document.querySelector(".carousel-container").offsetWidth;
  const translateX = startTranslate + (diffX / containerWidth) * 100;
  carousel.style.transform = `translateX(${translateX}%)`;
}

function handleDragEnd() {
  isDragging = false;
  carousel.style.transition = "transform 0.5s ease";
  // 计算滑动距离，判断是否切换幻灯片
  const containerWidth = document.querySelector(".carousel-container").offsetWidth;
  const diffX = startX - (event.type.includes("mouse") ? event.pageX : event.changedTouches[0].pageX);
  const slideThreshold = containerWidth * 0.2; // 20%宽度作为切换阈值

  if (diffX > slideThreshold) {
    // 向左滑动，下一张
    currentIndex++;
  } else if (diffX < -slideThreshold) {
    // 向右滑动，上一张
    currentIndex--;
  }
  updateCarousel();
  updatePagination();
  handleLoop();
  startAutoPlay();
}

// 绑定拖拽/触摸事件
carousel.addEventListener("mousedown", handleDragStart);
carousel.addEventListener("mousemove", handleDragMove);
carousel.addEventListener("mouseup", handleDragEnd);
carousel.addEventListener("mouseleave", handleDragEnd);

carousel.addEventListener("touchstart", handleDragStart);
carousel.addEventListener("touchmove", handleDragMove);
carousel.addEventListener("touchend", handleDragEnd);

// 自动播放逻辑
const autoPlayInterval = 3000;
let autoPlayTimer;

function startAutoPlay() {
  autoPlayTimer = setInterval(() => {
    currentIndex++;
    updateCarousel();
    updatePagination();
    handleLoop();
  }, autoPlayInterval);
}

function stopAutoPlay() {
  clearInterval(autoPlayTimer);
}

// 鼠标悬停停止自动播放
document.querySelector(".carousel-container").addEventListener("mouseenter", stopAutoPlay);
document.querySelector(".carousel-container").addEventListener("mouseleave", startAutoPlay);

// 初始化轮播
updateCarousel();
updatePagination();
startAutoPlay();

关键优化点说明 #

1. 无缝循环实现：

   • 在轮播首尾复制原首尾元素，当滑动到复制元素时，瞬间切换到对应原位置，视觉上实现无限循环
   • 通过临时移除过渡动画实现无感知位置切换

2. 拖拽与触摸支持：

   • 绑定鼠标和触摸事件，实时跟踪拖拽偏移量并更新轮播位置
   • 设置滑动阈值（容器宽度20%），判断是否触发幻灯片切换
   • 拖拽过程中暂停自动播放，结束后恢复

3. 悬停控制自动播放：

   • 给容器添加鼠标进入/离开事件，分别停止和启动自动播放
   • 拖拽操作同步触发自动播放暂停，提升交互流畅度

内容的提问来源于stack exchange，提问作者Omer Butt