JavaScript实现翻页功能(附效果图)

下面是详细的“JavaScript实现翻页功能(附效果图)”完整攻略。

1. 准备工作

在实现之前，需要准备以下内容：

HTML 页面中的内容需要做好分页。
在页面中添加用来显示翻页效果的 HTML 元素。
确定每页需要显示的数据数量。
翻页元素的样式。

2. 翻页效果实现步骤

接下来，我们开始实现 JavaScript 翻页功能。

2.1. 获取数据

首先，需要从网页中获取需要翻页的数据。

const items = document.querySelectorAll('.item');

这里使用 querySelectorAll() 方法获取页面中所有 class 为 item 的元素，并将其存储在数组 items 中。

2.2. 分页处理

将获取到的数据进行分页处理，计算每页需要显示的数据数量。

const pageSize = 6;  // 每页需要显示的数据数量
const pageCount = Math.ceil(items.length / pageSize);  // 总页数

这里可以根据实际需要调整每页显示的数据数量。

2.3. 显示第一页内容

在页面加载完成后，需要通过 JavaScript 显示第一页的内容。

const current = 1;  // 当前页码
showPage(current);

这里通过 showPage(current) 方法来显示当前页的内容。

2.4. 显示分页元素

接下来，需要在页面中显示分页元素，以供用户进行翻页操作。

const pagelist = document.createElement('ul');  // 创建分页元素
pagelist.className = 'pagination';  // 添加 CSS 样式
for (let i = 1; i <= pageCount; i++) {
  const li = document.createElement('li');  // 创建分页按钮
  const link = document.createElement('a');  // 创建分页链接
  link.href = '#';  // 链接地址
  link.innerHTML = i;  // 链接文字
  if (i === current) {
    li.className = 'active';  // 当前页的样式
  }
  li.appendChild(link);  // 添加链接到按钮元素
  pagelist.appendChild(li);  // 添加按钮元素到分页元素
}

这里通过 for 循环和 DOM 操作来生成分页按钮，并给当前页码添加样式。

2.5. 绑定翻页事件

最后，需要为分页按钮绑定翻页事件，实现用户点击分页按钮后切换页面内容。

pagelist.addEventListener('click', function(e) {
  const target = e.target;
  if (target.nodeName === 'A') {
    e.preventDefault();  // 防止链接跳转
    const page = parseInt(target.innerHTML);  // 获取点击的页码
    showPage(page);  // 显示指定页内容
  }
});

这里通过事件委托的方式，为分页元素添加点击事件，并在事件处理函数中获取点击的页码，显示指定页内容。

2.6. 完整代码

下面是完整的实现代码。

const items = document.querySelectorAll('.item');
const pageSize = 6;
const pageCount = Math.ceil(items.length / pageSize);
const current = 1;

// 显示指定页内容
function showPage(page) {
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  for (let i = 0; i < items.length; i++) {
    if (i >= start && i < end) {
      items[i].style.display = 'block';
    } else {
      items[i].style.display = 'none';
    }
  }
  const lis = document.querySelectorAll('.pagination li');
  for (let i = 0; i < lis.length; i++) {
    const link = lis[i].querySelector('a');
    if (link.innerHTML === page.toString()) {
      lis[i].className = 'active';
    } else {
      lis[i].className = '';
    }
  }
}

// 初始化分页元素
const pagelist = document.createElement('ul');
pagelist.className = 'pagination';
for (let i = 1; i <= pageCount; i++) {
  const li = document.createElement('li');
  const link = document.createElement('a');
  link.href = '#';
  link.innerHTML = i;
  if (i === current) {
    li.className = 'active';
  }
  li.appendChild(link);
  pagelist.appendChild(li);
}

// 添加分页元素到页面
const container = document.querySelector('.container');
container.appendChild(pagelist);

// 绑定分页按钮点击事件
pagelist.addEventListener('click', function(e) {
  const target = e.target;
  if (target.nodeName === 'A') {
    e.preventDefault();
    const page = parseInt(target.innerHTML);
    showPage(page);
  }
});

// 显示第一页内容
showPage(current);

3. 示例说明

示例1：实现“上一页”按钮

这里的“上一页”按钮可以让用户在当前页的基础上向前翻一页。

实现代码：

const previous = document.createElement('li');
previous.className = 'previous';
previous.innerHTML = '<a href="#">上一页</a>';
pagelist.insertBefore(previous, pagelist.firstChild);

previous.addEventListener('click', function(e) {
  e.preventDefault();
  const current = parseInt(document.querySelector('.pagination li.active a').innerHTML);
  if (current > 1) {
    showPage(current - 1);
  }
});

这里通过在分页元素前添加一个“上一页”按钮，然后绑定点击事件，在事件处理函数中获取当前页码，然后显示当前页码的上一页。

示例2：实现“下拉列表”选择分页

下拉列表能够让用户快速选择需要查看的页码。