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 promise方法来管理周期结束

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

jQuery幻灯片显示只显示计时器后的导航

2 个答案: