Question

我试图让一个滑块在一个循环中从左向右移动，只有第一个div工作，它移出来，一切都停止了。

您可以看到工作示例here

$(document).ready(function () {
    var delay = 3000,
        fade = 1000;
    var banners = $('.banner');
    var len = banners.length;
    var i = 0;
    setTimeout(cycle, delay);

    function cycle() {
        $(banners[i % len]).hide("slide", {
            direction: "left"
        });
        (fade, function () {
            $(banners[++i % len]).show("slide", {
                direction: "right"
            });
            (fade, function () {
                setTimeout(cycle, delay);
            });
        });
    }
});

谢谢

Answer 1

也许这就是你所需要的：Updated Fiddle

首先，你的代码永远不会被称为

(fade, function () {
    $(banners[++i % len]).show("slide", {
        direction: "right"
    });
    (fade, function () {
        setTimeout(cycle, delay);
    });
});

这导致cycle函数只会触发一次，因为你使用setTimeout，所以在你的情况下需要在x秒内反复循环，所以最好使用setInterval，所以更改

setTimeout(cycle, delay);

到

setInterval(cycle, delay);

然后对于cycle函数，将代码更改为

function cycle() {
    $(banners[i % len]).hide("slide", {
        direction: "left"
    });
    $(banners[++i % len]).show("slide", {
        direction: "right"
    });
}

已经完成，您的代码现在将正常运行。但由于.banner是div block元素，.banner在第一div显示在第一div之前将在2行中hidden 1}}是style，因此您需要添加position: absolute;

.banner

到{{1}}所以它会显示在同一行

Jquery幻灯片放映从左到右的幻灯片效果

1 个答案: