-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 的返回值保存在一个变量中，并确保在不再需要时清理间隔。取决于浏览器，这通常在页面卸载时自动完成，但在某些较旧的浏览器上，它可能在浏览器关闭之前不会发生。

编辑：看看小提琴，你的问题是css，而不是javascript。你li需要定位relativeor absolute，否则设置right属性无效。你也可以设置margin-right/ margin-left。

于 2013-10-13T19:25:09.600 回答