0

jQuery Easing および Cycle プラグインに基づいて jQuery プラグインを開発しました。サンプルはhttp://jsfiddle.net/Dx5N4/3/embedded/result/で見ることができます。アイデアは、Cycle プラグインが適用されるアイテム (画像など) の複数のリストを持つことです。各リストには異なる初期遅延が与えられるため、各リストの jQuery サイクル スライドショーは異なる時点で開始されます。プラグインの簡単なサンプルを以下に示します。

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 に答える