0

我们基于 jQuery Easing 和 Cycle 插件开发了一个 jQuery 插件。可以在http://jsfiddle.net/Dx5N4/3/embedded/result/看到一个示例。这个想法是有多个应用循环插件的项目列表（比如图像）。每个列表都有不同的初始延迟，以便每个列表上的 jQuery Cycle 幻灯片在不同的时间点开始。插件的快速示例如下所示。

var delay = 100;
$("#slideshow ul").each(function() {
    $(this).cycle({ delay    : delay
                    , easing : "easeInOutElastic"
                    , fx     : "scrollUp" });
    delay += 100;
});

当页面加载时，插件工作得很好。正确应用了 Cycle 插件，幻灯片开始和幻灯片转换延迟，正如预期的那样。

但是，如果用户切换到不同的浏览器选项卡、最小化浏览器窗口或切换到不同的应用程序，然后返回到带有幻灯片的浏览器选项卡，则各个幻灯片之间的延迟将丢失。此时会出现完全不可预测的行为，从所有幻灯片同时过渡到根本没有过渡。

关于浏览器选项卡失去焦点时出现什么问题以及如何纠正这个问题的任何想法？

4

1 回答 1

0

修改插件以通过普通 JavaScript 手动触发幻灯片过渡。

var slideshows = $("ul", $("#slideshow"));

$(slideshows).each(function() {
    $(this).cycle({ easing : "easeOutElastic", fx : "scrollUp", timeout : 0 });
});

setInterval(function() {
    var item = 1;

    slideshows.each(function() {
        var slideshow = $(this);
        setTimeout(function() {
            slideshow.cycle("next");
        }, item++ * 100);
    });
}, 4000);

修改后的（工作）代码可在http://jsfiddle.net/Dx5N4/5/embedded/result/获得。

于 2013-01-24T08:16:27.127 回答