javascript - 将索引保持在界限内并环绕

Question

我正在用寻呼机做一个小旋转木马。轮播显示元素 6 x 6，我有 36 个元素要显示。我有一个下一个和上一个按钮。显示的第一个元素是 [0, 6]。如果我按下上一个按钮并且没有以前的元素（例如我在第一页上），它应该环绕并走到最后。这同样适用于最后一个元素和下一个按钮。

我的代码如下所示：

$('#img_prev').click(function (e) {
    # change this line so it wraps around
    imgIndex = (imgIndex - 6) % 36;
    alert(imgIndex)
    refreshImages(imgIndex);
    e.preventDefault();
    return false;
});
$('#img_next').click(function (e) {
    imgIndex = (imgIndex + 6) % 36;
    refreshImages(imgIndex);
    e.preventDefault();
    return false;
});

它失败得很惨，因为 -6 % 36 是 -6 而不是 30。我可以用 if 处理它，(index < 0) ...但我更喜欢模数最能捕捉包装行为的条件。

我怎样才能让它环绕（见第二行）？

Answer 1

一种可能的解决方案是使用此答案：

function mod(x, m) {
    return (x%m + m)%m;
}

$('#img_prev').click(function (e) {
    # this line has been changed, now it wraps around
    imgIndex = mod(imgIndex - 6, 36);
    ...

Answer 2

你可以试试这个：

var maxElements = 36;
$('#img_prev').click(function (e) {
    // change this line so it wraps around
    imgIndex = (maxElements - 1) - (imgIndex % maxElements);
    alert(imgIndex)
    refreshImages(imgIndex);
    e.preventDefault();
    return false;
});
$('#img_next').click(function (e) {
    imgIndex = (imgIndex % maxElements);
    refreshImages(imgIndex);
    e.preventDefault();
    return false;
});

这是一个显示输出的小提琴：

(imgIndex % maxElements)

和

(maxElements - 1) - (imgIndex % maxElements);