每页四张的图片轮播：索引怎么推进

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

数据与渲染

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 以播报切换结果。纯装饰图则关闭读屏播报，避免干扰。