我有一张图片幻灯片,但如果用户多次点击下一张或上一张按钮,则会在幻灯片之间产生空白。
这是JSFiddle
以下是javascript代码:
// JavaScript Document
$(function() {
var liwidth = $("#galeria ul li").outerWidth(),
speed = 4000,
rotate = setInterval(auto, speed)
$("section#galeria").hover(function(e){
$("section#buttons").fadeIn();
clearInterval(rotate);
}, function(){
$("section#buttons").fadeOut();
rotate = setInterval(auto, speed);
});
$(".next").click(function(e){
e.preventDefault();
$("section#galeria ul").css({'width' : '99999%'}).animate({left:- liwidth}, function(){
$("#galeria ul li").last().after($("#galeria ul li").first());
$(this).css({'left':'0', 'width':'auto'
});
$('.next').removeClass('active');
});
});
$(".prev").click(function(e){
e.preventDefault();
$("#galeria ul li").first().before($("#galeria ul li").last().css({'margin-left':-liwidth}) );
$("section#galeria ul").css({'width':'99999%'}).animate({left:liwidth}, function(){
$("#galeria ul li").first().css({'margin-left':'0'});
$(this).css({'left':'0', 'width':'auto'});
});
});
function auto() {
$(".next").click();
}
});
如何解决此问题或阻止它?
感谢您的帮助!
答案 0 :(得分:0)
我不确定你是否同意这个,但你可以尝试:
1.点击后禁用按钮;
2.完成动作后启用它。
答案 1 :(得分:-1)
例如,您可以在单击后立即隐藏PREV / NEXT按钮,并在动画结束时再次显示它。