当前位置：文江博客话题详情

自定义 jQuery 幻灯片间隔问题

发布于 2024-12-01 12:15:06 字数 310 浏览 1 评论 0原文

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

单击“下一步”后，如何禁用“下一步”按钮，直到动画完成？（多次快速单击会使事情变得混乱）
单击“下一步”后，是否可以重置间隔，以便在下一次自动前进之前再间隔 3000 毫秒？

JsFiddle 示例

ps- 抱歉，如果代码很难看，希望可爱的小狗图片可以弥补这一点。 :)

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

折戟 2024-12-08 12:15:06

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

我希望这有帮助。

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

I hope this helps.

回复收藏 0 原文

牛↙奶布丁 2024-12-08 12:15:06

按钮

您不必禁用它们，最好在使用淡入淡出/显示之前重置动画 - 即，

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

而不是使用

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

间隔

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

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

buttons

you don't have to disable them, better you simply reset your animations before you use fade / show - i.e. instead of

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

use

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

interval

you can store a handle to your interval using var my_iv = setInterval(...) and each time the user click 'next' you simple cancel it with clearInterval(my_iv) and restart it

also your interval does not need duplicated code, a simple $('#next').click() should be enough...

回复收藏 0 原文

~没有更多了~