jquery - jQuery幻灯片仅在计时器后显示导航

Question

如何制作 jQuery 幻灯片仅允许用户在一段时间后导航到下一张幻灯片？

我是否必须在某个地方放入 setTimeout 或者是否有具有此功能的现有幻灯片？

我找不到任何

Answer 1

执行此操作的典型方法是前进到下一张幻灯片，隐藏导航控件以转到下一张幻灯片，然后在 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);

});

Answer 2

您可以使用 $.Deferred 承诺方法来管理周期的结束

$('#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();
    });
});