在此特定情况下禁用各种点击事件

时间:2014-06-04 01:34:33

标签: jquery

我有一张图片幻灯片,但如果用户多次点击下一张或上一张按钮,则会在幻灯片之间产生空白。

这是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();
}


});

如何解决此问题或阻止它?

感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

我不确定你是否同意这个,但你可以尝试:

1.点击后禁用按钮;

2.完成动作后启用它。

答案 1 :(得分:-1)

例如,您可以在单击后立即隐藏PREV / NEXT按钮,并在动画结束时再次显示它。