当前位置：首页 > JavaScript

js实现翻页效果

2026-01-30 18:49:44JavaScript

实现翻页效果的方法

翻页效果在网页中常用于展示分页数据或图片轮播。以下是几种常见的实现方式：

使用纯JavaScript实现基础翻页

let currentPage = 1;
const totalPages = 5;

function goToPage(pageNum) {
    if (pageNum < 1 || pageNum > totalPages) return;
    currentPage = pageNum;
    updatePageDisplay();
}

function updatePageDisplay() {
    document.getElementById('page-indicator').textContent = 
        `Page ${currentPage} of ${totalPages}`;
    // 这里添加实际内容更新的逻辑
}

document.getElementById('prev-btn').addEventListener('click', () => {
    goToPage(currentPage - 1);
});

document.getElementById('next-btn').addEventListener('click', () => {
    goToPage(currentPage + 1);
});

HTML结构示例：

<div id="content-container"></div>
<div>
    <button id="prev-btn">Previous</button>
    <span id="page-indicator">Page 1 of 5</span>
    <button id="next-btn">Next</button>
</div>

使用CSS过渡实现平滑翻页动画

const slider = document.querySelector('.slider');
let currentIndex = 0;
const items = document.querySelectorAll('.slider-item');
const itemWidth = items[0].offsetWidth;

function slideTo(index) {
    currentIndex = Math.max(0, Math.min(index, items.length - 1));
    slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
}

document.querySelector('.slide-next').addEventListener('click', () => {
    slideTo(currentIndex + 1);
});

document.querySelector('.slide-prev').addEventListener('click', () => {
    slideTo(currentIndex - 1);
});

配套CSS:

.slider {
    display: flex;
    transition: transform 0.5s ease;
}
.slider-item {
    flex: 0 0 100%;
}

使用Intersection Observer实现无限滚动

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadMoreContent();
        }
    });
}, { threshold: 1.0 });

observer.observe(document.querySelector('.load-more-trigger'));

function loadMoreContent() {
    // 加载更多内容的逻辑
    console.log('Loading more content...');
    // 加载完成后需要更新观察目标
}

使用第三方库实现高级翻页

对于更复杂的需求，可以考虑使用现成的库：

Swiper.js：功能强大的滑动/翻页库
Flickity：专注于触控的滑动库
Pagination.js：专门处理分页的库

使用Swiper的示例：

const swiper = new Swiper('.swiper-container', {
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});

响应式翻页实现

针对不同屏幕尺寸调整翻页行为：

js实现翻页效果

function setupPagination() {
    const isMobile = window.innerWidth < 768;

    if (isMobile) {
        // 移动端使用滑动翻页
        enableTouchSwipe();
    } else {
        // 桌面端使用按钮翻页
        setupButtonNavigation();
    }
}

window.addEventListener('resize', setupPagination);
setupPagination();