Javascript 轮播 - 添加队列时出现问题

Javascript Carousel - Issue adding Queue

本文关键字：问题 队列 轮播 添加 Javascript      更新时间：2023-09-26

我正在使用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>
您需要

在更高的范围内定义变量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'
        });
    });
}
相关文章：