左右箭头进行翻页js

<div id="page-container">
    <button id="prev-page">←</button>
    <div id="page-content">Page Content Here</div>
    <button id="next-page">→</button>
</div>

#page-container {
    text-align: center;
}

#prev-page, #next-page {
    cursor: pointer;
    font-size: 20px;
    margin: 10px;
}

let currentPage = 1;
const totalPages = 10; // 假设总共有10页

document.getElementById('prev-page').addEventListener('click', function() {
    if (currentPage > 1) {
        currentPage--;
        updatePageContent();
    }
});

document.getElementById('next-page').addEventListener('click', function() {
    if (currentPage < totalPages) {
        currentPage++;
        updatePageContent();
    }
});

function updatePageContent() {
    document.getElementById('page-content').innerText = `Page ${currentPage}`;
}

// 初始化页面内容
updatePageContent();