Question

您好我的滑块问题请访问此网站并查看http://paruyr.bl.ee/ 点击我的箭头后，它会以异步方式工作，它变化非常快，然后变慢，然后重复。我认为这是从开始滑块和停止滑块。

        var sliderPrev = 0,
        sliderNext = 1;


$("#slider > img").fadeIn(1000); 
startSlider();

function startSlider(){

    count = $("#slider > img").size();
    loop = setInterval(function(){

        if (sliderNext>(count-1)) {
            sliderNext = 0;
            sliderPrev = 0;
        };

        $("#slider").animate({left:+(-sliderNext)*100+'%'},900);
        sliderPrev = sliderNext;
        sliderNext=sliderNext+1;

    },6000)
}

function prev () {
    var newSlide=sliderPrev-1;
    showSlide(newSlide);
}

function next () {
    var newSlide=sliderPrev+1;
    showSlide(sliderNext);
}

function stopLoop () {
    window.clearInterval(loop);
}

function showSlide(id) {
    stopLoop();
    if (id>(count-1)) {
            id = 0;
        } else if(id<0){
            id=count-1;
        }

        $("#slider").animate({left:+(-id)*100+'%'},900);
        sliderPrev = id;
        sliderNext=id+1;
        startSlider();

};

$("#slider, .arrows").hover(function() {
    stopLoop()
}, function() {
    startSlider()
});

function onlyNext () {
        var newSlide=sliderPrev+1;
        onlyShowSlide(newSlide);
}

function onlyShowSlide(id) {

    if (id>(count-1)) {
            id = 0;
        } else if(id<0){
            id=count-1;
        }

        $("#slider").animate({left:+(-id)*100+'%'},900);
        sliderPrev = id;
        sliderNext=id+1;        
};

Answer 1

这是因为你的动画正在排队。

尝试添加：

.stop( true, true )

在每个动画方法之前。即。

$("#slider").stop( true, true ).animate({left:+(-id)*100+'%'},900);

Answer 2

我要做的是在动画开始时向滑块添加一个类，并在完成后删除该类：

$("#slider").animate({left:+(-id)*100+'%'}, {
    duration: 900,
    start: function() {
        $('#slider').addClass('blocked');
    },
    complete: function() {
        $('#slider').removeClass('blocked');
    }
});

现在，如果滑块被阻挡，请检查每次点击事件：

function next () {
    if (!$('#slider').hasClass('blocked')) {
        var newSlide=sliderPrev+1;
        showSlide(sliderNext);
    }
}

这是一个非常简单的解决方案，我确信有一个更好的解决方案。

编辑：正如marcjae指出的那样，你可以阻止动画排队。这意味着当您双击时，幻灯片仍将移动2张幻灯片。使用我的方法，第二次点击将被完全忽略。

Answer 3

您可以使用变量标志来控制动画是否仍在播放，或者只使用.stop（）来避免叠加动画。

$("#pull").click(function(){
    $("#togle-menu").stop().slideToggle("slow");
});

Answer 4

我认为最好的选择是检查动画是否正在进行中，如果是，则阻止动作，如下所示：

function prev () {
    if(!$('#slider').is(":animated"))
    {
        var newSlide=sliderPrev-1;
        showSlide(newSlide);
    }
}

function next () {
    if(!$('#slider').is(":animated"))
    {
        var newSlide=sliderPrev+1;
        showSlide(sliderNext);
    }
}

为了说明这与stop()之间的区别，请查看此JSFiddle。如果您在stop()版本中多次单击，您会发现一些不连贯的动作。

Answer 5

关于stop的答案很好，但是你有一个更大的问题导致了所描述的行为。问题出在这里：

$("#slider, .arrows").hover(function() {
    stopLoop()
}, function() {
    startSlider()
});

您已将此绑定到.arrows以及#slider，并且滑块中包含箭头。因此，当您将鼠标移出箭头然后退出整个滑块时，您连续两次调用start而不调用stop。如果您将鼠标悬停在箭头上然后连续多次离开滑块，则可以看到此信息。幻灯片将在6秒后更改多次。

同样，考虑单击的情况：

Enter the `#slider` [stopLoop]
Enter the `.arrows` [stopLoop]
Click the arrow     [stopLoop]
                    [startSlider]
Leave the `.arrows` [startSlider]
Leave the `#slider` [startSlider]

从这一系列事件中可以看出，startSlider连续3次被调用，而不会在其间调用stopLoop。结果是创建了3个区间，其中2个区间在下次调用stopLoop时不会停止。

您应该在hover上使用此#slider，更重要的是，在stopLoop中添加对startSlider的调用。这将确保在创建新区间之前始终清除区间。

$("#slider").hover(function() {
    stopLoop()
}, function() {
    startSlider()
});

function startSlider(){
    stopLoop();

    /* start the slider */
}

防止动画双击问题

5 个答案: