Question

我有一个jQuery滑块。当在箭头上反复点击以移动幻灯片时，它会继续滑动更多幻灯片，如何在点击虔诚时创建点击暂停？

//When clicking on the right: 
$('.scroll-right').click(function(){
    //margin-left the slide including -= :
 $slideContainer.animate({'margin-left': '-='+singleSlide}, 
                                              slideAnimationSpeed, function(){
        currentSlide++;
        console.log('Current Slide: '+ currentSlide);
        if ((currentSlide+1) === totalSlides) {
            currentSlide = 5;
            $('#slide_'+nextSlide).addClass("sliderPoiner");
            $slideContainer.css('margin-left', '-83.3300012207031em');
        }
    });
    addTheShadowRight(currentSlide);
})

//When clicking on the left: 
$('.scroll-left').click(function(){
    addTheShadowleft(currentSlide);
    //margin-left the slide including -= :
    $slideContainer.animate({'margin-left': '+='+singleSlide}, 
                                              slideAnimationSpeed, function(){
        currentSlide--;
        console.log('Current Slide: '+ currentSlide);
        if ((currentSlide) === 3) {
            currentSlide = 24;
            $slideContainer.css('margin-left', '-617.419875488281em');
        }
    });
})

Answer 1

//When clicking on the right: 
$('.scroll-right').click(function(){
    //margin-left the slide including -= :
 ->$slideContainer.stop().animate({'margin-left': '-='+singleSlide}, 
                                              slideAnimationSpeed, function(){
        currentSlide++;
        console.log('Current Slide: '+ currentSlide);
        if ((currentSlide+1) === totalSlides) {
            currentSlide = 5;
            $('#slide_'+nextSlide).addClass("sliderPoiner");
            $slideContainer.css('margin-left', '-83.3300012207031em');
        }
    });
    addTheShadowRight(currentSlide);
})

//When clicking on the left: 
$('.scroll-left').click(function(){
    addTheShadowleft(currentSlide);
    //margin-left the slide including -= :
->    $slideContainer.stop().animate({'margin-left': '+='+singleSlide}, 
                                              slideAnimationSpeed, function(){
        currentSlide--;
        console.log('Current Slide: '+ currentSlide);
        if ((currentSlide) === 3) {
            currentSlide = 24;
            $slideContainer.css('margin-left', '-617.419875488281em');
        }
    });
})

我已添加stop()代码，您可以看到->

这可以防止动画排队。所以，在你触发其他东西的那一刻，队列将被删除，动画就会停止。

你应该在任何动画之前使用它，除非你想要那个队列实际建立起来。

如何防止我的jQuery滑块获得＆＃34; overClicks＆＃34;

1 个答案: