js如何实现翻页效果

<div id="content">
  <!-- 内容将在这里动态加载 -->
</div>
<button id="prevPage">上一页</button>
<button id="nextPage">下一页</button>

let currentPage = 1;
const itemsPerPage = 10;
const totalItems = 100; // 假设总共有100项内容

function loadPage(page) {
  const start = (page - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const contentDiv = document.getElementById('content');
  
  // 模拟从服务器获取数据
  const data = Array.from({ length: totalItems }, (_, i) => `Item ${i + 1}`);
  const pageData = data.slice(start, end);
  
  contentDiv.innerHTML = pageData.map(item => `<div>${item}</div>`).join('');
}

document.getElementById('prevPage').addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    loadPage(currentPage);
  }
});

document.getElementById('nextPage').addEventListener('click', () => {
  if (currentPage < Math.ceil(totalItems / itemsPerPage)) {
    currentPage++;
    loadPage(currentPage);
  }
});

// 初始加载第一页
loadPage(currentPage);