Question

我正在寻找答案或建议如何让我的滑块忽略对箭头的任何点击，直到向左或向右箭头的移动完成。

我在这里有一个链接，可以准确地向您显示正在发生的事情。

http://madaxedesign.co.uk/dev/index/

和下面的Jquery代码：

$(document).ready(function() {

    var nav = $('div.slider').css('overflow', 'hidden').children('ul'),
    ul = $('#container .slider ul'),
    count = $('#container .slider ul li').length,
    width = count * 854;    

    $('#container .slider ul').width(width);

function slideRight() {
        ul.animate({
            left: '0'
        }, 1000);
    }

    function moveRight() {
        $('#container .slider ul li:first').insertBefore($('#container .slider ul li:last'));           
        ul.css("left", "-854px");
    }

    function slideLeft() {
        ul.animate({
            left: '-=854'
        }, 1000, function() {
            $('#container .slider ul li:first').appendTo(ul);           
            ul.css("left", "0");
        });
    }

    var autoSlide;

    autoSlide = setInterval(function() {
        slideLeft();
    }, 3000);

    $('#container .slider_container').mouseenter(function() {
        clearInterval(autoSlide);
    }).mouseleave(function() {
        autoSlide = setInterval(function() {
            slideLeft();
        }, 3000);
    });

    $('#slider-nav').show();

    $('#slider-nav .left_arrow').click(function(slideLeft){
        event.stopPropagation();
    });

    $('#slider-nav .right_arrow').click(function() {
        moveRight();
        slideRight().delay(200);
    });
});

Answer 1

使用:animated selector检查动画是否正在运行。

$('#slider-nav .right_arrow').click(function() {
    if(ul.is(":animated")) return;
    ...
});

Answer 2

诀窍是保留一个变量，告诉你当前是否正在滑动，并且仅在false时执行滑动函数。然后当执行滑动函数时，将其设置为true，并告诉回调将其设置为false。我在下面的代码中调用了变量sliding：

$(document).ready(function() {
    // Flag to test on trigger
    var sliding = false;

    var nav = $('div.slider').css('overflow', 'hidden').children('ul'),
    ul = $('#container .slider ul'),
    count = $('#container .slider ul li').length,
    width = count * 854;    

    $('#container .slider ul').width(width);

function slideRight() {
        // Stop the function if we're already sliding
        if(sliding){
            return false;
        }

        // And now we're sliding
        sliding = true;

        ul.animate({
            left: '0'
        }, 1000, function(){
            // Slide over!
            sliding = false;
        });
    }

    function moveRight() {
        $('#container .slider ul li:first').insertBefore($('#container .slider ul li:last'));
        ul.css("left", "-854px");
    }

    function slideLeft() {
        // Stop the function if we're already sliding
        if(sliding){
            return false;
        }

        // And now we're sliding
        sliding = true;
        ul.animate({
            left: '-=854'
        }, 1000, function() {
            // Slide over!
            sliding = false;

            $('#container .slider ul li:first').appendTo(ul);
            ul.css("left", "0");
        });
    }

    var autoSlide;

    autoSlide = setInterval(function() {
        slideLeft();
    }, 3000);

    $('#container .slider_container').mouseenter(function() {
        clearInterval(autoSlide);
    }).mouseleave(function() {
        autoSlide = setInterval(function() {
            slideLeft();
        }, 3000);
    });

    $('#slider-nav').show();

    $('#slider-nav .left_arrow').click(function(slideLeft){
        event.stopPropagation();
    });

    $('#slider-nav .right_arrow').click(function() {
        moveRight();
        slideRight().delay(200);
    });
});

Answer 3

我认为您的问题是slideRight()没有返回任何内容......

function slideRight() {
    return ul.animate({
        left: '0'
    }, 1000);
}

Jquery Slider，垃圾邮件点击打破我的滑块

3 个答案: