4

私はポケットベルで小さなカルーセルをやっています。カルーセルには要素が 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 は 30 ではなく -6 であるため、惨めに失敗します。if で処理できます(index < 0) ...が、ラッピング動作を最もよく捉えるモジュロを使用した条件を好みます。

これを折り返すにはどうすればよいですか (2 行目を参照)。

4

2 に答える 2

10

考えられる解決策の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);
    ...
于 2013-06-06T14:10:02.450 に答える
1

これを試すことができます：

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);
于 2013-06-07T13:41:27.703 に答える