当前位置：首页 > JavaScript

js实现翻页效果

2026-04-04 10:33:13JavaScript

使用纯JavaScript实现翻页效果

翻页效果可以通过监听按钮点击事件并动态更新页面内容来实现。以下是一个基本的实现方法：

// 获取DOM元素
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const pageIndicator = document.getElementById('page-indicator');
let currentPage = 1;
const totalPages = 10; // 假设总共有10页

// 更新页面显示
function updatePage() {
    pageIndicator.textContent = `Page ${currentPage} of ${totalPages}`;
    // 这里可以添加加载对应页码内容的逻辑
}

// 上一页按钮事件
prevBtn.addEventListener('click', () => {
    if (currentPage > 1) {
        currentPage--;
        updatePage();
    }
});

// 下一页按钮事件
nextBtn.addEventListener('click', () => {
    if (currentPage < totalPages) {
        currentPage++;
        updatePage();
    }
});

// 初始化
updatePage();

使用CSS实现翻页动画

可以为翻页效果添加平滑的过渡动画：

.content-container {
    transition: opacity 0.3s ease;
}

.content-container.fade-out {
    opacity: 0;
}

然后在JavaScript中添加动画效果：

js实现翻页效果

function updatePage() {
    const contentContainer = document.getElementById('content-container');
    contentContainer.classList.add('fade-out');

    setTimeout(() => {
        pageIndicator.textContent = `Page ${currentPage} of ${totalPages}`;
        // 加载新内容
        contentContainer.classList.remove('fade-out');
    }, 300);
}

实现页码跳转功能

添加页码输入框和跳转按钮：

<input type="number" id="page-input" min="1" max="10">
<button id="go-btn">Go</button>

JavaScript处理跳转逻辑：

js实现翻页效果

const pageInput = document.getElementById('page-input');
const goBtn = document.getElementById('go-btn');

goBtn.addEventListener('click', () => {
    const pageNum = parseInt(pageInput.value);
    if (pageNum >= 1 && pageNum <= totalPages) {
        currentPage = pageNum;
        updatePage();
    }
});

使用AJAX加载分页内容

如果需要从服务器加载分页数据：

function loadPageContent(page) {
    fetch(`/api/data?page=${page}`)
        .then(response => response.json())
        .then(data => {
            // 更新页面内容
            document.getElementById('content').innerHTML = data.content;
        });
}

// 在updatePage函数中调用
function updatePage() {
    loadPageContent(currentPage);
    pageIndicator.textContent = `Page ${currentPage} of ${totalPages}`;
}

实现无限滚动翻页

监听滚动事件实现无限滚动：

window.addEventListener('scroll', () => {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
        if (currentPage < totalPages) {
            currentPage++;
            loadPageContent(currentPage);
        }
    }
});

这些方法可以根据具体需求组合使用，实现不同风格的翻页效果。