当前位置：首页 > JavaScript

JS如何实现左右滑动

2026-03-01 10:37:23JavaScript

监听触摸事件

通过监听 touchstart、touchmove 和 touchend 事件来跟踪触摸位置。记录起始点坐标和移动过程中的坐标变化。

let startX = 0;
let endX = 0;

element.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

element.addEventListener('touchmove', (e) => {
  endX = e.touches[0].clientX;
});

计算滑动距离

在 touchend 事件中计算滑动距离，判断滑动方向。根据需求设定阈值，确定是否触发滑动动作。

element.addEventListener('touchend', () => {
  const distance = endX - startX;
  const threshold = 50; // 滑动阈值

  if (Math.abs(distance) > threshold) {
    if (distance > 0) {
      console.log('向右滑动');
    } else {
      console.log('向左滑动');
    }
  }
});

使用 CSS 过渡效果

结合 CSS 的 transform 和 transition 属性实现平滑滑动效果。动态修改元素的 translateX 值。

.slider {
  transition: transform 0.3s ease;
}

function slideElement(element, distance) {
  element.style.transform = `translateX(${distance}px)`;
}

处理边界情况

确保滑动不会超出内容范围。例如，在轮播图中限制第一张和最后一张的滑动行为。

let currentPosition = 0;
const maxPosition = 0;
const minPosition = -500;

function handleSlide(direction) {
  if (direction === 'left' && currentPosition > minPosition) {
    currentPosition -= 100;
  } else if (direction === 'right' && currentPosition < maxPosition) {
    currentPosition += 100;
  }
  slideElement(element, currentPosition);
}

使用第三方库

如果需要更复杂的功能（如惯性滑动、自动播放），可以使用现成的库如 Swiper 或 Hammer.js。

// 使用 Swiper 示例
const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

兼容鼠标事件

为支持桌面端，可以额外监听 mousedown、mousemove 和 mouseup 事件，逻辑与触摸事件类似。

element.addEventListener('mousedown', (e) => {
  startX = e.clientX;
});

element.addEventListener('mousemove', (e) => {
  endX = e.clientX;
});

element.addEventListener('mouseup', () => {
  // 滑动逻辑与 touchend 相同
});

JS如何实现左右滑动