JavaScript 是一门非常强大的编程语言，它可以通过编写脚本来实现网页动态效果，其中包括图片分页。图片分页在网页设计中非常常见，它可以帮助我们在一个页面里展示大量图片而不影响网页的加载速度。接下来我们来详细了解 JavaScript 图片分页。

一个很好的例子是图片展示页面，比如说图片集合库。通常来说，这样的页面可能会有成千上万个图片，如果我们把所有图片都放在一个页面上，它们会非常的慢而且会让用户的网页浏览体验受到影响。因此，我们可以使用 JavaScript 来将大量图片划分为多个页面来展示。

function displayImages(pageSize, pageIndex) {
// 获取所有图片元素
const images = document.querySelectorAll('.image');
// 获取图片总数
const totalImages = images.length;
// 计算每页图片数量和页面数
const pageCount = Math.ceil(totalImages / pageSize);
const imagesPerPage = Math.min(pageSize, totalImages);
// 计算当前页面开始和结束位置
const start = pageIndex * pageSize;
const end = start + imagesPerPage;
// 遍历图片，设置显示或隐藏状态
for (let i = 0; i< totalImages; i++) {
images[i].style.display = (i >= start && i< end) ? 'block' : 'none';
}
}

可以看到，这个函数接受两个参数：pageSize 和 pageIndex。pageSize 代表每页需要展示的图片数量，而 pageIndex 代表当前要展示的页面索引。当我们调用这个函数时，它会遍历整个页面 Image 元素列表，并且根据 pageSize 和 pageIndex 来计算当前页面要显示的图片并将其设置为可见状态 (display:block)，同时将其余图片设置为不可见状态 (display:none)。

我们还可以将图片分页功能从 HTML 模板代码中提取出来，并添加一些可交互的控件，如上一页、下一页、页面跳转等，使得用户可以更方便地浏览图片。

const DEFAULT_PAGE_SIZE = 20;
function initializePagination() {
const imagesContainer = document.querySelector('.images-container');
const paginationContainer = document.createElement('div');
paginationContainer.classList.add('pagination-container');
imagesContainer.parentNode.insertBefore(paginationContainer, imagesContainer.nextSibling);
const images = imagesContainer.children;
const totalImages = images.length;
const pageCount = Math.ceil(totalImages / DEFAULT_PAGE_SIZE);
for (let i = 0; i< pageCount; i++) {
const pageLink = document.createElement('a');
pageLink.classList.add('page-link');
pageLink.href = "#";
pageLink.innerText = i + 1;
paginationContainer.appendChild(pageLink);
pageLink.addEventListener('click', function (event) {
event.preventDefault();
const pageIndex = parseInt(event.target.innerText) - 1;
displayImages(DEFAULT_PAGE_SIZE, pageIndex);
});
}
displayImages(DEFAULT_PAGE_SIZE, 0);
}

在这个示例代码中，我们首先定义了一个常量 DEFAULT_PAGE_SIZE，它是每页图片数量的默认值。接下来，我们定义了一个初始化分页功能的函数 initializePagination。这个函数会为 Image 元素列表插入一个新的分页控件容器，并根据 DEFAULT_PAGE_SIZE 来设置图片的初始显示状态。

在初始化代码中，我们通过遍历 pageCount 并创建一个分页链接（即一个元素）来构建分页控件。每个链接都关联了一个点击事件，当点击链接时，它会计算要显示的图片页面索引并调用displayImages函数来更新图片显示状态。

这种 JavaScript 图片分页技术是一种非常有用且灵活的技术，它可以在很多场景下帮助我们优化网页性能和用户体验。无论是图片展示网站还是产品目录页面，图片分页都是非常有用且实现起来很简单的技术。