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'
        });
    });
}