移动端滑块滑动跳过中间项问题求助：slideTo函数重复触发

问题根源 #

• touchmove持续触发导致重复执行：滑动过程中touchmove事件会连续触发，只要滑动差值超过阈值，就会反复调用slidePrev/slideNext，造成slideTo多次执行。
• 自动轮播与手动滑动冲突：手动滑动时未暂停自动轮播，两者可能同时触发滑动逻辑，导致效果混乱。
• 无滑动状态标记：未标记当前是否已处理过本次滑动，同一滑动动作被多次响应。

修复步骤 #

1. 添加isSliding状态变量，标记当前是否正在处理滑动，防止重复触发。
2. 在touchmove中，仅当未处于滑动状态且达到阈值时执行滑动操作，执行后标记为已滑动。
3. touchstart时清除自动轮播定时器，touchend时重新启动定时器，避免手动与自动轮播冲突。
4. 优化slideTo函数的边界判断，确保索引始终在有效范围内。

修改后的完整代码 #

JavaScript #

const slider = document.querySelector('.slider');
const sliderContainer = document.querySelector('.sliderContainer');
const items = document.querySelectorAll('.item');
const rowGap = (window.innerWidth / 2); // 按需调整行间距

let currentIndex = 0;
let touchStartX = 0;
let isSliding = false; // 新增滑动状态标记
let autoSlideInterval; // 存储自动轮播定时器

// 计算所有项的总宽度（包含行间距）
const totalItemsWidth = Array.from(items).reduce((total, item) => {
  const itemStyle = getComputedStyle(item);
  const itemWidth = item.offsetWidth + parseFloat(itemStyle.marginLeft) + parseFloat(itemStyle.marginRight);
  return total + itemWidth + rowGap;
}, 0);

// 设置滑块容器宽度
sliderContainer.style.width = `${totalItemsWidth}px`;

function startAutoSlide() {
  autoSlideInterval = setInterval(slideNext, 8500);
}

function stopAutoSlide() {
  clearInterval(autoSlideInterval);
}

function slideTo(index) {
  // 边界处理：索引超出范围时修正
  if (index < 0) {
    index = items.length - 1;
  } else if (index >= items.length) {
    index = 0;
  }

  const translation = index * (items[0].offsetWidth + rowGap);
  sliderContainer.style.transform = `translateX(-${translation}px)`;
  currentIndex = index;
  isSliding = false; // 滑动完成后重置状态
}

function slideNext() {
  slideTo(currentIndex + 1);
}

function slidePrev() {
  slideTo(currentIndex - 1);
}

// 启动自动轮播
startAutoSlide();

slider.addEventListener('touchstart', handleTouchStart);
slider.addEventListener('touchmove', handleTouchMove);
slider.addEventListener('touchend', handleTouchEnd);

function handleTouchStart(event) {
  touchStartX = event.touches[0].clientX;
  stopAutoSlide(); // 手动滑动开始时暂停自动轮播
  isSliding = false; // 重置滑动状态
}

function handleTouchMove(event) {
  event.preventDefault(); // 阻止默认滚动行为
  if (isSliding) return; // 已在滑动中则跳过

  const touchX = event.touches[0].clientX;
  const touchDiff = touchX - touchStartX;

  if (touchDiff > 50) {
    isSliding = true; // 标记为正在滑动
    slidePrev();
  } else if (touchDiff < -50) {
    isSliding = true; // 标记为正在滑动
    slideNext();
  }
}

function handleTouchEnd() {
  touchStartX = 0;
  startAutoSlide(); // 滑动结束后恢复自动轮播
}

CSS #

.slider {
    margin: auto;
    display: flex;
    width: fit-content;
    overflow: hidden;
    gap: 50vw;
    position: relative;
    left: 1%;
}
  
.sliderContainer {
    display: flex;
    transition: transform 0.3s ease;
    padding-bottom: 3vh;
    position: relative;
}

.sliderWrapper {
    height: auto;
    width: 99.5%;
    overflow: hidden;
    background-color: white;
    border: 1px solid #E28C4A;
}

.sliderWrapper h1 {
    font-size: 11vmin;
    margin: 15px 0 15px 0;
    color: #9D000D;
}

.item {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
}

.item img {
    width: 97%;
    border-radius: 15px;
}

.item > button {
    width: 95%;
}

.item h2 {
    min-width: 340px;
    font-size: 30px;
    margin: 7px 0 15px 0;
}

HTML #

<div class="sliderWrapper">
    <h1>What's Popular</h1>
    <div class="sliderContainer">
        <div class="slider">
            <div id="butterPecan" class="item">
                <div class="textWrapper">
                    <img src="Images/Butter-Pecan-Mobile.webp">
                    <h2>Butter Pecan</h2>
                </div>
                <button>Order ahead</button>
            </div>
            <div class="item">
                <div class="textWrapper">
                    <img id="mintChocolate" src="Images/Mint-Chocolate-Chip-Mobile.webp">
                    <h2>Mint Chocolate Chip</h2>
                </div>
                <button>Order ahead</button>
            </div>
            <div class="item">
                <div class="textWrapper">
                    <img id="peanutButter" src="Images/Peanut-Butter-Chippy-Mobile.webp">
                    <h2>Peanut Butter Chippy</h2>
                </div>
                <button>Order ahead</button>
            </div>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Myles Wirth