carousel 回绕但索引继续增加时如何计算缩略图的索引？

Question

我觉得这更像是一道数学题...

我正在使用名为 jcarousel 的 JavaScript 轮播库的旧版本。它获取图像列表并将其转换为 carousel/slideshow。它支持环绕功能，当您点击到最后一张图片时，它会环绕到幻灯片的开头。我正在使用一个回调函数，它接收轮播中所有图像列表中显示的图像的当前索引。但是，当您到达轮播的末尾并重新开始时，索引不会重置为开头，它只会继续增加。

这是一个示例...假设我的轮播中有 5 张图片。索引从 1（不是 0）开始。当轮播到image5时，下一张显示的是image1，但是index是6。同样，往另一个方向走，index是递减的。

-1. image4
0. image5
1. image1
2. image2
3. image3
4. image4
5. image5
6. image1
7. image2

如何计算索引以使其保持在缩略图索引的范围内？例如：

• when index == -1 // index 应该是 4 因为它显示的是 image4
• when index == 1 // 索引可以为 1，没关系。我可以很容易地减去 1 成为基于 0 的索引
• when index == 6 // 索引应该是 1 因为它显示的是 image1

Answer 1

使用取模函数。假设 numImg 包含图像总数，您可以通过计算

得到正确的数字

 (index + numImg) % numImg

将numImg添加到索引中确保处理-1，取模(%) numImg计算除法的余数，因此结果在0和numImg之间。