图片分页js特效

<div id="image-gallery">
  <!-- 图片将在这里动态加载 -->
</div>
<button id="prev-page">上一页</button>
<button id="next-page">下一页</button>

const images = [/* 图片数组 */];
const pageSize = 5; // 每页显示的图片数量
let currentPage = 0;

function displayImages(page) {
  const start = page * pageSize;
  const end = start + pageSize;
  const gallery = document.getElementById('image-gallery');
  gallery.innerHTML = ''; // 清空画廊
  
  for (let i = start; i < end && i < images.length; i++) {
    const img = document.createElement('img');
    img.src = images[i];
    gallery.appendChild(img);
  }
}

document.getElementById('prev-page').addEventListener('click', () => {
  if (currentPage > 0) {
    currentPage--;
    displayImages(currentPage);
  }
});

document.getElementById('next-page').addEventListener('click', () => {
  if ((currentPage + 1) * pageSize < images.length) {
    currentPage++;
    displayImages(currentPage);
  }
});

// 初始化显示第一页图片
displayImages(currentPage);