1

このコードは、私が望むように「li」を動かしますが、最後の「li」に到達して次をクリックすると、動き続け、「li」はユーザービューから移動します。最初の「li」が再び表示されるようにループする方法を知りたいです。

<script type="text/javascript">
    $(document).ready(function() {          
        $('#right').click(function() {
            $('.carousel-inner li').animate({
                right: '+=292px'
                }, 500);
        });
        $('#left').click(function() {
            $('.carousel-inner li').animate({
                right: '-=292px'
                }, 500);
        });     
    });
</script>

ここに例を見るためのフィドルがあります

4

3 に答える 3

2

これで問題が解決するはずです：

$(document).ready(function () {
    var inner = $('.carousel-inner'),
        slides = inner.find('li'),
        width = slides.eq(0).outerWidth(true),
        max = (width * slides.length) - width;

    $('#right, #left').on('click', function () {
        var currRight = parseInt(inner.css('right'), 10), move;
        if (this.id === 'right') {
            move = currRight === max ? 0 : currRight+width;
        } else {
            move = currRight === 0 ? max : currRight-width;
        }
        inner.animate({ right: move }, 500);
    });
});

right上の 4 行は要素をキャッシュし、使用できる最大値やwidthスライドの など、いくつかの基本的な変数を設定します。

次に、click繰り返しを避けるためにイベントを組み合わせました。クリック イベントの最初の行は、currRightas$('.carousel-inner')の現在の CSSright値と、move後で使用されるものを定義します。

if (this.id === 'right'){ /* #right */ }else{ /* #left */ }idクリックされた要素の がrightまたはであるかどうかをチェックしますleft。if ステートメント内のコードは、スライダーがゼロ (開始) または最大 (終了) にあるかどうかを確認し、move変数を正しい値に設定します。

ここで動作しています：http://jsfiddle.net/mFxcq/10/

更新：スライドをタイマーで動かすには、クリックイベントがアタッチされた後にこれを追加します：

function setTimer(){
    clearTimeout(window.slideTimer);
    window.slideTimer = setTimeout(function(){ $('#right').trigger('click'); }, 5000);
};

setTimer();

setTimer();その後すぐに追加するinner.animate({ right: move }, 500);と、すべてが期待どおりに機能します。

ここで動作しています: http://jsfiddle.net/mFxcq/14/

于 2013-10-01T23:14:39.567 に答える
1

totalItemsカルーセル内のアイテムの総数を表すcurrentItem変数と、現在表示されているアイテムの数 (つまり、1 から totalItems までの数) を表す変数を追加します。次に、それが最後の項目かどうかを確認し、そうであれば、位置を最初の項目に戻します。改訂された fiddleを確認してください。双方向で機能します。以下に JavaScript の例を示します。わかりやすくするためにすべてを書き出しています。

var totalItems = $('.carousel-inner li').length;
var currentItem = 1;

$('#right').click(function () {
    if (currentItem === totalItems) {
        // We've reached the end -- go to the beginning again
        $('.carousel-inner li').animate({
            right: '-=' + 292 * (totalItems-1) + 'px'
        }, 500);
        currentItem = 1;
    } else {
        $('.carousel-inner li').animate({
            right: '+=292px'
        }, 500);
        currentItem += 1;
    }
});
$('#left').click(function () {
    if (currentItem === 1) {
        // We're at the beginning -- loop back to the end
        $('.carousel-inner li').animate({
            right: '+=' + 292 * (totalItems-1) + 'px'
        }, 500);
        currentItem = totalItems;
    } else {
        $('.carousel-inner li').animate({
            right: '-=292px'
        }, 500);
        currentItem -= 1;
    }
});
于 2013-10-01T23:15:10.573 に答える