js 翻页代码

在JavaScript中实现翻页功能，通常涉及到DOM操作和事件处理。以下是一个简单的翻页代码示例，使用原生JavaScript实现：

HTML结构

<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>

JavaScript代码

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);

解释

HTML结构：包含一个内容区域#content，两个按钮#prevBtn和#nextBtn，以及一个显示当前页码的区域#pagination。
JavaScript代码：
- currentPage：当前页码，初始为1。
- totalPages：总页数，这里假设为3页。
- pageSize：每页显示的内容条数，这里假设为2条。
- displayPage(page)：根据页码显示对应的内容，并更新页码显示。
- 事件监听器：为“上一页”和“下一页”按钮添加点击事件，更新currentPage并调用displayPage函数。