javascript - jqueryでループを設定するには?

Question

私はこのカルーセルをゼロから作成しようとしていますが、今のところこれを持っています。

<script type="text/javascript">
    $(document).ready(function() {
        setTimeout(function() {
            $('.carousel-inner li').animate({
                right: '580px'
                }, 500);                
        }, 3000);

        $('#right').click(function() {
            $('.carousel-inner li').animate({
                right: '580px'
                }, 500);
        });
        $('#left').click(function() {
            $('.carousel-inner li').animate({
                left: '0px'
                }, 500);
        });     
    });
</script>

「#right」と「#left」をクリックすると機能しますが、1回だけです。「#next」をもう一度クリックすると、再び移動するようにしたいと思います。

ここにフィドルがあります

Answer 1

使用の前left: '0px'にleft: '-=580px'。そして、あなたがright: '580px'置いた場所left: '+=580px'。ただし、ユーザーはすべての li を可視領域の外に移動できます。if が必要になります。

Answer 2

を使用して要素の現在の位置を見つけ、要素$('.carousel-inner li').offset()を移動する値に追加する必要があります。