当前位置：首页 > JavaScript

js实现滑动翻页

2026-01-30 14:45:51JavaScript

实现滑动翻页的基本思路

滑动翻页通常通过监听触摸事件或鼠标事件，结合CSS过渡或动画实现。核心逻辑包括：

监听 touchstart、touchmove、touchend（移动端）或 mousedown、mousemove、mouseup（桌面端）事件。
计算滑动距离和方向，判断是否触发翻页。
使用CSS变换（如 transform）或JavaScript动画切换页面内容。

移动端触摸滑动实现

以下是一个基于触摸事件的简单实现：

const slider = document.querySelector('.slider');
let startX, moveX, isDragging = false;

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

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

slider.addEventListener('touchend', () => {
    if (!isDragging) return;
    isDragging = false;
    const threshold = 50; // 滑动阈值
    if (Math.abs(moveX - startX) > threshold) {
        // 根据方向切换页面
        if (moveX > startX) {
            goToPrevPage();
        } else {
            goToNextPage();
        }
    }
    slider.style.transform = 'translateX(0)';
});

function goToPrevPage() {
    // 上一页逻辑
}

function goToNextPage() {
    // 下一页逻辑
}

桌面端鼠标拖动实现

类似触摸事件，但需监听鼠标事件：

slider.addEventListener('mousedown', (e) => {
    startX = e.clientX;
    isDragging = true;
});

slider.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    moveX = e.clientX;
    const diffX = moveX - startX;
    slider.style.transform = `translateX(${diffX}px)`;
});

slider.addEventListener('mouseup', () => {
    isDragging = false;
    // 同 touchend 逻辑
});

平滑过渡与动画

使用CSS过渡提升体验：

.slider {
    transition: transform 0.3s ease;
}

或通过JavaScript动态添加类名：

function animateSlider(direction) {
    slider.classList.add('sliding');
    slider.style.transform = `translateX(${direction * 100}%)`;
    setTimeout(() => {
        slider.classList.remove('sliding');
        // 更新页面内容
    }, 300);
}

完整示例代码

结合分页逻辑的完整实现：

<div class="slider-container">
    <div class="slider">
        <div class="page">Page 1</div>
        <div class="page">Page 2</div>
    </div>
</div>

<style>
    .slider-container {
        overflow: hidden;
        width: 100%;
    }
    .slider {
        display: flex;
        transition: transform 0.3s ease;
    }
    .page {
        min-width: 100%;
    }
</style>

<script>
    const slider = document.querySelector('.slider');
    let currentPage = 0;
    let startX, moveX, isDragging = false;

    // 事件监听（同上）
    // ...

    function goToPrevPage() {
        if (currentPage > 0) {
            currentPage--;
            slider.style.transform = `translateX(-${currentPage * 100}%)`;
        }
    }

    function goToNextPage() {
        if (currentPage < slider.children.length - 1) {
            currentPage++;
            slider.style.transform = `translateX(-${currentPage * 100}%)`;
        }
    }
</script>