Javascript轮播-问题添加队列

Question

我正在使用一个jQuery轮播来一次显示5个列表项，当向左或向右单击代码时，代码会将列表移动适当的宽度以显示新项。 我的问题是，当用户多次单击向左或向右按​​钮时，该功能将很难处理。

stop（）。animate将不起作用，因为它会停止动画而不是计算

我需要在用户每次调用该函数时将其基本排队，或者在该函数仍在运行时禁用该调用机制吗？ 关于如何做到这一点的任何想法

jQuery的

$(document).ready(function() {
    $('.brand-carousel-inner li:first').before($('.brand-carousel-inner li:last'));
});

function brandSlide(direction) {
    //Create width variables
    var brand_item_total_width = 196;

    //Create movement variable by adjusting the LEFT position +/-
    if (direction == 'left') {
        var movement = parseInt($('.brand-carousel-inner').css('left')) + brand_item_total_width;
    } else {
        var movement = parseInt($('.brand-carousel-inner').css('left')) - brand_item_total_width;
    }

    //Apply movement variable, animate carousel and reposition UL
    $('.brand-carousel-inner').animate({
        'left': movement
    }, 700).promise().done(function() {
        if (direction == 'left') {
            $('.brand-carousel-inner li:first').before($('.brand-carousel-inner li:last'));
        } else {
            $('.brand-carousel-inner li:last').after($('.brand-carousel-inner li:first'));
        }
        $('.brand-carousel-inner').css({
            'left': '-196px'
        });
    });
}

的HTML

<section id="brand-carousel">
        <a href="#" onclick="brandSlide('left'); return false" class="nav-left"></a>
        <a href="#" onclick="brandSlide('right'); return false" class="nav-right"></a>
        <div class="brand-mask">
           <ul class="brand-carousel-inner">
                    <li><img src="image/image.jpg" /></li>
                    /*20 more list items*/
           </ul>
        </div>
     </section>  

Answer 1

您需要在更高的范围内定义变量movement ，因为在动画中显然无法访问它：

$(document).ready(function() {
    $('.brand-carousel-inner li:first').before($('.brand-carousel-inner li:last'));
});

function brandSlide(direction) {
    //Create width variables
    var brand_item_total_width = 196;

    //Create movement variable by adjusting the LEFT position +/-
    var movement = null;

    if (direction === 'left') {
        movement = parseInt($('.brand-carousel-inner').css('left')) + brand_item_total_width;
    } else {
        movement = parseInt($('.brand-carousel-inner').css('left')) - brand_item_total_width;
    }

    //Apply movement variable, animate carousel and reposition UL
    $('.brand-carousel-inner').animate({
        'left': movement
    }, 700).promise().done(function() {
        if (direction === 'left') {
            $('.brand-carousel-inner li:first').before($('.brand-carousel-inner li:last'));
        } else {
            $('.brand-carousel-inner li:last').after($('.brand-carousel-inner li:first'));
        }
        $('.brand-carousel-inner').css({
            'left': '-196px'
        });
    });
}