-2

カルーセル用のこのjQueryコードがありますが、想定どおりに機能していません。

                            var totalItems = $('.inner li').length,
                        currentItem = 1,
                        $inner = $('.inner li'),
                        width = $inner.outerWidth(true);

                        setInterval(function() {
                            $inner.animate({
                                right: '+=' + width
                            }, 500);
                            currentItem += 1;
                        }, 500);

このFIDDLEで例を表示できます

前もって感謝します。

編集: これは、別のカルーセルで作業しているコード全体です。

$(document).ready(function() {  

        var totalItems = $('.inner li').length,
            currentItem = 1,
            $inner = $('.inner li'),
            width = $inner.outerWidth(true),
            speed = 400,
            delay = 4000;

        var timer = setInterval(function() {
            if (currentItem === totalItems) {
                $inner.animate({
                    right: '-=' + width * (totalItems-1) + 'px'
                }, speed);
                currentItem = 1;
            } else {
                $inner.animate({
                    right: '+=' + width
                }, speed);
                currentItem += 1;
            }
        }, delay);

        $('.carousel').hover (function(ev) {
            clearInterval(timer);
        }, function(ev){
            timer = setInterval(function() {
                if (currentItem === totalItems) {
                    $inner.animate({
                        right: '-=' + width * (totalItems-1) + 'px'
                    }, speed);
                    currentItem = 1;
                } else {
                    $inner.animate({
                        right: '+=' + width
                    }, speed);
                    currentItem += 1;
                }
        }, delay);
        });
        $('#right').click(function () {
            if (currentItem === totalItems) {
                $inner.animate({
                    right: '-=' + width * (totalItems-1) + 'px'
                }, speed);
                currentItem = 1;
            } else {
                $inner.animate({
                    right: '+=' + width,
                }, speed);
                currentItem += 1;
            }
        });
        $('#left').click(function () {
            if (currentItem === 1) {
                $inner.animate({
                    right: '+=' + width * (totalItems-1) + 'px'
                }, speed);
                currentItem = totalItems;
            } else {
                $inner.animate({
                    right: '-=' + width
                }, speed);
                currentItem -= 1;
            }
        });

});

4

1 に答える 1

1

いいえ、そうではありません。

渡された関数が呼び出される間隔を設定するだけなので、間隔として 500 ミリ秒を渡すと、関数は今から (約) 500 ミリ秒後に呼び出され、次に (約) 1 秒後に呼び出されます。

setInterval は、ページの読み込みとは何の関係もありません。

私が言っているのは、ブラウザーのタイミングが (いくつかの理由で) あまり正確ではないためです。また、setInterval の戻り値を変数に保存し、必要がなくなったら必ず間隔をクリーンアップする必要があります。ブラウザーによっては、これは通常、ページのアンロード時に自動的に行われますが、一部の古いブラウザーでは、ブラウザーを閉じるまで行われない場合があります。

編集：フィドルを見ると、問題はjavascriptではなくcssにあります。またはliを配置する必要があります。そうしないと、プロパティを設定しても効果がありません。/を設定することもできます。relativeabsoluterightmargin-rightmargin-left

于 2013-10-13T19:25:09.600 に答える