自定义jQuery幻灯片间隔问题

Question

我正在构建一个自定义jQuery幻灯片，作为学习语言的一种方式。到目前为止，它自动前进，并具有上一个/下一个按钮。

1. 点击下一步后，如何在动画完成前禁用下一个按钮？ （多次快速点击会搞砸事情）
2. 点击下一步后，是否可以重置间隔，以便在下一次自动前进之前再过3000毫秒？

JsFiddle Example

ps-如果代码很丑，很抱歉，希望可爱的小狗照片弥补它。 ：）

Answer 1

$('#next').click(function(){
   var m = this;
     $(m).attr('disabled', 'true');
    $('.bslide img:last-child')
         .fadeOut(1000, function() {
    $('.bslide img:last-child')
           .prependTo($('.bslide'));
    $('.bslide img:last-child')
         .prev().show();
     $(m).attr('disabled', 'false');
    });
});

我希望这会有所帮助。

Answer 2

<强>按钮

你不必禁用它们，更好的是你只需在使用淡入/显示之前重置动画 - 即代替

$('.bslide img:last-child').fadeOut(1000, ...

使用

$('.bslide img:last-child').stop().fadeOut(1000, ...

<强>间隔

您可以使用var my_iv = setInterval(...)存储间隔句柄，每次用户点击“下一步”时，您只需使用clearInterval(my_iv)取消它并重新启动

您的间隔也不需要重复的代码，简单的$('#next').click()就足够了......