当前位置：首页 > JavaScript

js 实现滑动

2026-03-14 22:50:58JavaScript

实现滑动的基础方法

使用JavaScript实现滑动效果可以通过多种方式完成，最常见的是通过修改元素的transform属性或left/top属性。以下是两种基础实现方式：

修改transform属性

const element = document.getElementById('slider');
element.style.transform = 'translateX(100px)';

修改left属性

const element = document.getElementById('slider');
element.style.left = '100px';

平滑动画的实现

为了使滑动效果更平滑，通常结合CSS的transition属性或使用requestAnimationFrame。

CSS Transition

js 实现滑动

#slider {
  transition: transform 0.3s ease;
}

const element = document.getElementById('slider');
element.style.transform = 'translateX(100px)';

requestAnimationFrame

let start = null;
const duration = 300; // 动画持续时间（毫秒）
const element = document.getElementById('slider');

function animate(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  const distance = Math.min(progress / duration, 1) * 100;
  element.style.transform = `translateX(${distance}px)`;
  if (progress < duration) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

手势滑动的实现

对于移动端或需要手势交互的场景，可以通过监听触摸事件实现滑动。

触摸事件处理

js 实现滑动

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

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

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

element.addEventListener('touchend', () => {
  // 滑动结束后的逻辑，如回弹或锁定位置
});

使用第三方库

如果需要更复杂的滑动效果，可以考虑使用第三方库如Swiper.js或Hammer.js。

Swiper.js示例

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
  </div>
</div>

<script>
  const swiper = new Swiper('.swiper', {
    loop: true,
  });
</script>

Hammer.js示例

const element = document.getElementById('slider');
const hammer = new Hammer(element);

hammer.on('pan', (e) => {
  element.style.transform = `translateX(${e.deltaX}px)`;
});

标签: js