当前位置：首页 > JavaScript

js实现左右滑动

2026-02-28 22:20:21JavaScript

实现左右滑动的JavaScript方法

使用Touch事件监听实现基础滑动

let startX, moveX;
const slider = document.getElementById('slider');

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

slider.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].clientX;
  const diff = moveX - startX;
  slider.style.transform = `translateX(${diff}px)`;
});

slider.addEventListener('touchend', () => {
  // 添加滑动结束后的逻辑
});

使用CSS Transform实现平滑动画

#slider {
  transition: transform 0.3s ease;
  width: 100%;
  overflow: hidden;
}

使用第三方库实现高级滑动

安装Swiper.js库

npm install swiper

基本Swiper配置

import Swiper from 'swiper';
import 'swiper/css';

new Swiper('.swiper', {
  slidesPerView: 1,
  spaceBetween: 30,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

响应式滑动布局实现

添加断点配置

new Swiper('.swiper', {
  breakpoints: {
    640: { slidesPerView: 2 },
    1024: { slidesPerView: 3 }
  }
});

性能优化建议

使用will-change属性提升性能

#slider {
  will-change: transform;
}

节流处理touchmove事件

js实现左右滑动

function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall < delay) return;
    lastCall = now;
    return fn(...args);
  };
}

slider.addEventListener('touchmove', throttle(handleMove, 16));

标签: js