头像列表翻页如何实现

头像列表翻页可以通过前端框架（如React、Vue等）或原生JavaScript实现。以下是一些简单的实现方法：

1. 使用分页组件：许多UI库都提供了分页组件，可以快速实现头像列表翻页功能。你可以根据需要自定义样式和显示数量。常见的UI库包括Ant Design、Element UI等。

2. 使用原生JavaScript：可以通过计算总页数、当前页码等参数来动态生成头像列表并更新DOM。这种方法需要处理分页逻辑和DOM操作，相对较复杂。

下面是一个使用原生JavaScript实现头像列表翻页的示例：

<div id="avatar-list"></div>
<div id="pagination"></div>

<script>
const avatars = ['avatar1.png', 'avatar2.png', 'avatar3.png', 'avatar4.png', 'avatar5.png', 'avatar6.png', 'avatar7.png', 'avatar8.png', 'avatar9.png', 'avatar10.png'];
const pageSize = 4; // 每页显示数量

let currentPage = 1; // 当前页码

function renderAvatarList() {
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  const currentAvatars = avatars.slice(startIndex, endIndex); // 当前页的头像列表

  const avatarList = document.getElementById('avatar-list');
  avatarList.innerHTML = '';
  currentAvatars.forEach(avatar => {
    const img = document.createElement('img');
    img.src = avatar;
    avatarList.appendChild(img);
  });
}

function renderPagination() {
  const totalPages = Math.ceil(avatars.length / pageSize); // 总页数

  const pagination = document.getElementById('pagination');
  pagination.innerHTML = '';

  // 上一页按钮
  const prevBtn = document.createElement('button');
  prevBtn.innerText = '上一页';
  prevBtn.disabled = currentPage === 1;
  prevBtn.addEventListener('click', () => {
    currentPage--;
    renderAvatarList();
    renderPagination();
  });
  pagination.appendChild(prevBtn);

  // 页码按钮
  for (let i = 1; i <= totalPages; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.innerText = i;
    pageBtn.disabled = i === currentPage;
    pageBtn.addEventListener('click', () => {
      currentPage = i;
      renderAvatarList();
      renderPagination();
    });
    pagination.appendChild(pageBtn);
  }

  // 下一页按钮
  const nextBtn = document.createElement('button');
  nextBtn.innerText = '下一页';
  nextBtn.disabled = currentPage === totalPages;
  nextBtn.addEventListener('click', () => {
    currentPage++;
    renderAvatarList();
    renderPagination();
  });
  pagination.appendChild(nextBtn);
}

renderAvatarList();
renderPagination();
</script>

在上面的代码中，我们首先定义了一个头像列表和每页显示数量。然后定义了一个renderAvatarList函数，用于根据当前页码渲染头像列表；另一个renderPagination函数则用于渲染分页器。在分页器中，我们使用了上一页、页码和下一页三个按钮，并监听了它们的点击事件来更新当前页码并重新渲染头像列表和分页器。