Question

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

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

当页面加载时，插件工作正常。正确应用Cycle插件，幻灯片按预期开始和幻灯片转换延迟。

但是，如果用户切换到其他浏览器选项卡，最小化浏览器窗口或切换到其他应用程序，然后使用幻灯片显示返回浏览器选项卡，则各个幻灯片之间的延迟将丢失。此时完全不可预测的行为随之而来，从同时转换的所有幻灯片到完全没有转换。

关于浏览器标签失去焦点时出现问题的任何想法，以及如何纠正这个问题？

Answer 1

修改插件以通过普通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/获得。

jQuery Cycle插件：当前浏览器选项卡失去焦点后出现不可预测的行为

1 个答案: