### [每页四张的图片轮播：索引怎么推进](https://www.huociguo.com/article/1639)

**Published:** 2026-10-01T13:14:39

**Author:** 米了

**Excerpt:** 点击下一页切换一组图片，到达末尾回到开头。核心只有一个游标：记录当前起始下标，每次加固定步长并对总数取模。页切…

点击下一页切换一组图片，到达末尾回到开头。核心只有一个游标：记录当前起始下标，每次加固定步长并对总数取模。

![屏幕上显示的脚本代码](https://api.huociguo.com/wp-content/uploads/2026/10/e10.jpg)

页切换由一个起始下标与取模运算决定

## 数据与渲染

```
const SIZE = 4;
let start = 0;
function render() {
  const page = list.slice(start, start + SIZE);
  if (page.length < SIZE) {
    page.push(...list.slice(0, SIZE - page.length));
  }
  box.innerHTML = '';
  page.forEach(src => {
    const img = document.createElement('img');
    img.src = src;
    box.appendChild(img);
  });
}
```

末尾不足一组时从头部补齐，画面始终填满四个位置，不需要为末尾单独写分支。

## 推进

```
next.addEventListener('click', () => {
  start = (start + SIZE) % list.length;
  render();
});
```

取模保证游标不会越界。总数正好是步长整数倍时，末尾一组之后回到 0，行为一致。

## 三个注意点

-   图片数量小于一组时取模结果不变，需要用总数与页大小取较小值作为实际步长。
-   切换时保留容器高度，避免图片载入完成前页面跳动。
-   按钮连点会造成重复渲染，加一次防抖或用动画帧合并。

## 可访问性

按钮要给出可读名称，图片区域标记 aria-live 以播报切换结果。纯装饰图则关闭读屏播报，避免干扰。

**Tags:** DOM操作, 分页展示, 图片轮播, 数组切片, 索引循环

**Categories:** HTML5

---