当前位置：首页 > JavaScript

js实现滑动翻页

2026-03-01 05:49:28JavaScript

实现滑动翻页的基本思路

滑动翻页通常通过监听用户手势（如触摸事件或鼠标滚轮事件）来触发页面切换。核心逻辑包括：

js实现滑动翻页

检测滑动方向（左/右或上/下）
根据滑动方向切换页面内容
添加过渡动画效果

基础实现代码示例

// 获取容器元素
const container = document.querySelector('.slider-container');
let startX, moveX;
let currentPage = 0;
const totalPages = 3; // 总页数

// 触摸事件处理
container.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

container.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].clientX;
  e.preventDefault(); // 阻止默认滚动行为
});

container.addEventListener('touchend', () => {
  const diffX = moveX - startX;

  // 向右滑动且不是第一页
  if (diffX > 50 && currentPage > 0) {
    currentPage--;
    updatePage();
  } 
  // 向左滑动且不是最后一页
  else if (diffX < -50 && currentPage < totalPages - 1) {
    currentPage++;
    updatePage();
  }
});

// 更新页面位置
function updatePage() {
  container.style.transform = `translateX(-${currentPage * 100}%)`;
  container.style.transition = 'transform 0.3s ease';
}

鼠标滚轮实现方案

// 滚轮事件处理
container.addEventListener('wheel', (e) => {
  e.preventDefault();

  if (e.deltaY > 0 && currentPage < totalPages - 1) {
    currentPage++;
  } else if (e.deltaY < 0 && currentPage > 0) {
    currentPage--;
  }

  updatePage();
});

CSS样式建议

.slider-container {
  display: flex;
  width: 300%; /* 根据页数调整 */
  height: 100vh;
  overflow: hidden;
}

.slide-page {
  width: 33.33%; /* 100% / 页数 */
  height: 100%;
  flex-shrink: 0;
}

进阶功能实现

添加页面指示器：

// 创建指示器
const indicator = document.createElement('div');
indicator.className = 'page-indicator';
document.body.appendChild(indicator);

// 更新指示器
function updateIndicator() {
  indicator.innerHTML = '';
  for (let i = 0; i < totalPages; i++) {
    const dot = document.createElement('span');
    dot.className = i === currentPage ? 'dot active' : 'dot';
    indicator.appendChild(dot);
  }
}

添加惯性滑动效果：

let velocity = 0;
let lastTime = 0;

container.addEventListener('touchmove', (e) => {
  const now = Date.now();
  const deltaTime = now - lastTime;
  const deltaX = e.touches[0].clientX - startX;

  if (deltaTime > 0) {
    velocity = deltaX / deltaTime;
  }

  lastTime = now;
  startX = e.touches[0].clientX;
});