如何实现touch Slider触摸滑块的自动轮播效果？

实现说明 #

要同时支持自动轮播和触摸滑动切换，需要补充JS交互逻辑，同时对原有CSS做少量适配优化，避免布局错乱问题。

完整代码 #

CSS 代码 #

.slider-container {
  height: 100vh;
  display: inline-flex;
  overflow: hidden;
  scrollbar-width: none;
  transform: translateX(0);
  will-change: transform;
  transition: transform 0.3s ease-out;
  cursor: grab;
  /* 兼容webkit内核浏览器隐藏滚动条 */
}
.slider-container::-webkit-scrollbar {
  display: none;
}
  
.slide{
  height: 100vh;
  width: 100vw;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.slide img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

HTML 代码 #

<div class="slider-container">
  <div class="slide">
    <img src="pics/slider/127616685-multi-colored-samples-of-marble-granite-and-travertine-chips-and-pebbles-for-landscape-design-close-.jpg" alt="石材样本"/>
  </div>
  <div class="slide">
    <img src="pics/slider/1554689647283.jpg" alt="滑块配图"/>
  </div>   
</div>

JS 代码 #

const slider = document.querySelector('.slider-container');
const slides = Array.from(document.querySelectorAll('.slide'));
let currentIndex = 0;
let isDragging = false;
let startPos = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationID = 0;
let autoPlayTimer = null;
const autoPlayInterval = 3000; // 自动切换间隔为3秒，可自行调整

// 初始化滑块
init();

function init() {
  // 绑定移动端触摸事件
  slider.addEventListener('touchstart', touchStart);
  slider.addEventListener('touchmove', touchMove);
  slider.addEventListener('touchend', touchEnd);
  // 绑定PC端鼠标拖动事件
  slider.addEventListener('mousedown', touchStart);
  slider.addEventListener('mousemove', touchMove);
  slider.addEventListener('mouseup', touchEnd);
  slider.addEventListener('mouseleave', touchEnd);
  // 启动自动轮播
  startAutoPlay();
}

// 启动自动轮播
function startAutoPlay() {
  stopAutoPlay();
  autoPlayTimer = setInterval(() => {
    currentIndex = (currentIndex + 1) % slides.length;
    setSliderPosition();
  }, autoPlayInterval);
}

// 停止自动轮播
function stopAutoPlay() {
  if (autoPlayTimer) {
    clearInterval(autoPlayTimer);
    autoPlayTimer = null;
  }
}

function touchStart(e) {
  isDragging = true;
  startPos = getPositionX(e);
  animationID = requestAnimationFrame(animation);
  slider.style.cursor = 'grabbing';
  // 手动操作时暂停自动轮播
  stopAutoPlay();
}

function touchMove(e) {
  if (isDragging) {
    const currentPos = getPositionX(e);
    currentTranslate = prevTranslate + currentPos - startPos;
  }
}

function touchEnd() {
  isDragging = false;
  cancelAnimationFrame(animationID);
  const movedBy = currentTranslate - prevTranslate;
  // 滑动距离超过100px触发切换，避免误触
  if (movedBy < -100 && currentIndex < slides.length - 1) currentIndex += 1;
  if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;
  setSliderPosition();
  slider.style.cursor = 'grab';
  // 操作结束后恢复自动轮播
  startAutoPlay();
}

function getPositionX(e) {
  return e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
}

function animation() {
  slider.style.transform = `translateX(${currentTranslate}px)`;
  if (isDragging) requestAnimationFrame(animation);
}

function setSliderPosition() {
  currentTranslate = currentIndex * -window.innerWidth;
  prevTranslate = currentTranslate;
  slider.style.transform = `translateX(${currentTranslate}px)`;
}

功能说明 #

• 支持移动端触摸滑动、PC端鼠标拖动切换幻灯片
• 自动轮播默认间隔3秒，手动操作时自动暂停，操作结束后恢复轮播
• 滑动距离超过100px才会触发切换，避免误触
• 图片自动适配容器大小，不会溢出视口

内容的提问来源于stack exchange，提问作者Karim Abdlehameed