js 翻页代码

<div id="content">
  <p>Page 1 content</p>
  <p>Page 1 content</p>
  <!-- 更多内容 -->
</div>
<button id="prevBtn">Previous</button>
<button id="nextBtn">Next</button>
<div id="pagination">
  <span>Page 1 of 3</span>
</div>

const content = document.getElementById('content');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const pagination = document.getElementById('pagination');

let currentPage = 1;
const totalPages = 3; // 假设总共有3页
const pageSize = 2; // 每页显示2条内容

function displayPage(page) {
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  const pages = content.children;

  for (let i = 0; i < pages.length; i++) {
    if (i >= start && i < end) {
      pages[i].style.display = 'block';
    } else {
      pages[i].style.display = 'none';
    }
  }

  pagination.textContent = `Page ${page} of ${totalPages}`;
}

prevBtn.addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    displayPage(currentPage);
  }
});

nextBtn.addEventListener('click', () => {
  if (currentPage < totalPages) {
    currentPage++;
    displayPage(currentPage);
  }
});

// 初始化显示第一页
displayPage(currentPage);