jquery - タイマーの後にのみナビゲーションを表示する jQuery スライドショー

Question

jQuery スライドショーで、ユーザーが一定時間後に次のスライドに移動できるようにするにはどうすればよいですか?

どこかで setTimeout をスローする必要がありますか、それともこの機能を備えた既存のスライドショーがありますか?

何も見つかりません

Answer 1

$.Deferredpromiseメソッドを使用してサイクルの終わりを管理できます

$('#myslidebutton').click(function () {
    mybutton = $(this);
    mybutton.hide(); //or whatever to not allow a click
    $('div').animate({ // whatever your slide show part is
        "opacity": "0"
    }, 1000).promise().done(function () {
        //after the animation
        mybutton.delay(1000).show();
    });
});

Answer 2

これを行う一般的な方法は、次のスライドに進み、次のスライドに移動するためにナビゲーション コントロールを非表示にし、setTimeout() の後でナビゲーション コントロールを表示することです。

HTML を見せてくれないので、説明のために製造された HTML をいくつか示します。

HTML:

<button id="nextSlide">Next</button>

jQuery:

$("#nextSlide").click(function() {
    var button = $(this);

    // go to next slide here

    // hide next button
    button.hide();

    // after 2 seconds, show the button again
    setTimeout(function() {
        button.fadeIn(500);
    }, 2000);

});

または、次のような jQuery アニメーションで完全に行うこともできます。

$("#nextSlide").click(function() {
    // go to next slide here

    // hide next button, delay, then dfade in
    $(this).fadeOut(200).delay(2000).fadeIn(500);

});