Jquery 覆盖JCarousel'；s导航功能，同时保持个人（覆盖）代码与转盘同步

我在下一个和上一个按钮中添加了一些JS代码，如下所示：

$('.jcarousel-control-prev').on('click', function(){
    updateCurrentPhotoId(-1);
    return false;
});
$('.jcarousel-control-next').on('click', function(){
    updateCurrentPhotoId(+1);
    return false;
});

因此，我知道当前显示的是哪个图像（在我的情况下，一次只能显示一个），并且我可以显示与该图像相关的内容

我的问题是当我快速单击下一步（或上一步）时：图像变化缓慢（即使我在同一秒钟内单击两次，“只应用了一个下一步”（应用两次单击不会破坏动画，也不会记住在显示下一个图像后，我单击了两次，应该再“执行下一步”一次）但是每次单击时都会执行我的代码（updateCurrentPhotoId）

因此，要明确的是，如果我在第一个图像上，并且我在下一个图像上快速单击了3次，currentPhotoId会增加3倍（这很酷），但会显示第二个图像，而不是第三个图像。如果我正常单击（我会等到动画完成后再单击下一个），没关系。但是如果我速度太快，我的计数器和转盘将不再同步（因此显示的数据与显示的照片无关…）

我想我可以给我的函数增加一些延迟，相当于动画的持续时间，但我不知道怎么做

而且，正如我在上面看到的，必须有一种简单的方法“将动作与动画同步”（在这个例子中，尝试快速点击旋转木马下面的缩略图，你会看到你必须等待图像被更改才能选择另一个图像），但我不明白代码中的魔力在哪里（可能在粗体函数中？）

这是示例的代码：

(function($) {
// This is the connector function.
// It connects one item from the navigation carousel to one item from the
// stage carousel.
// The default behaviour is, to connect items with the same index from both
// carousels. This might _not_ work with circular carousels!
var connector = function(itemNavigation, carouselStage) {
    return carouselStage.jcarousel('items').eq(itemNavigation.index());
};

$(function() {
    // Setup the carousels. Adjust the options for both carousels here.
    var carouselStage      = $('.carousel-stage').jcarousel();
    var carouselNavigation = $('.carousel-navigation').jcarousel();

    // We loop through the items of the navigation carousel and set it up
    // as a control for an item from the stage carousel.
    // ** Here is the "bolded" function **
    carouselNavigation.jcarousel('items').each(function() {
        var item = $(this);

        // This is where we actually connect to items.
        var target = connector(item, carouselStage);

        item
            .on('jcarouselcontrol:active', function() {
                carouselNavigation.jcarousel('scrollIntoView', this);
                item.addClass('active');
            })
            .on('jcarouselcontrol:inactive', function() {
                item.removeClass('active');
            })
            .jcarouselControl({
                target: target,
                carousel: carouselStage
            });
    });

    // Setup controls for the stage carousel
    $('.prev-stage')
        .on('jcarouselcontrol:inactive', function() {
            $(this).addClass('inactive');
        })
        .on('jcarouselcontrol:active', function() {
            $(this).removeClass('inactive');
        })
        .jcarouselControl({
            target: '-=1'
        });

    $('.next-stage')
        .on('jcarouselcontrol:inactive', function() {
            $(this).addClass('inactive');
        })
        .on('jcarouselcontrol:active', function() {
            $(this).removeClass('inactive');
        })
        .jcarouselControl({
            target: '+=1'
        });

    // Setup controls for the navigation carousel
    $('.prev-navigation')
        .on('jcarouselcontrol:inactive', function() {
            $(this).addClass('inactive');
        })
        .on('jcarouselcontrol:active', function() {
            $(this).removeClass('inactive');
        })
        .jcarouselControl({
            target: '-=1'
        });

    $('.next-navigation')
        .on('jcarouselcontrol:inactive', function() {
            $(this).addClass('inactive');
        })
        .on('jcarouselcontrol:active', function() {
            $(this).removeClass('inactive');
        })
        .jcarouselControl({
            target: '+=1'
        });
    });
})(jQuery);

这是我完整的JCarousel初始化代码：

    var carouselCurrentPhoto = 1;

function updateCurrentPhotoId(increment){
    carouselCurrentPhoto += increment;

    var photoCount = <?php echo count($project['Photo']); ?>;

    if(carouselCurrentPhoto <= 0){
        carouselCurrentPhoto = photoCount;
    }else if(carouselCurrentPhoto > photoCount){
        carouselCurrentPhoto = 1;
    }

    loadPhoto();
}

function loadPhoto(){
    var descriptionDiv = $('#description_photo_' + carouselCurrentPhoto)[0];
    $('#photo_description')[0].innerHTML = descriptionDiv.innerHTML;
}

(function($) {
    $(function() {
        /* Carousel initialization */
        $('.jcarousel')
            .jcarousel({
                wrap: 'circular',
            });

        /* Prev control initialization */
        $('.jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        /* Next control initialization */
        $('.jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                // Options go here
                target: '+=1'
            });

        $('.jcarousel-control-prev').on('click', function(){
            updateCurrentPhotoId(-1);
            return false;
        });
        $('.jcarousel-control-next').on('click', function(){
            updateCurrentPhotoId(+1);
            return false;
        });

        /* Pagination initialization */
        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .jcarouselPagination({
            });
    });
})(jQuery);

$(document).ready(function (){
    loadPhoto();
});

var carouselCurrentPhoto=1；
函数updateCurrentPhotoId（增量）{
转盘当前照片+=增量；
var光电计数=；
if（旋转木马当前照片光电计数）{
CarouseCurrentPhoto=1；
}
loadPhoto（）；
}
函数loadPhoto（）{
变量descriptionDiv=$（'description_photo'u+carouselCurrentPhoto）[0]；
$（“#照片描述”）[0].innerHTML=descriptionDiv.innerHTML；
}
（函数（$）{
$（函数（）{
/*转盘初始化*/
$（“.jcarousel”）
伊卡洛斯先生({
包装：“圆形”，
});
/*上一控制初始化*/
$（“.jcarousel control prev”）
.on（'jcarouselcontrol:active'，function（）{
$（this.removeClass（'inactive'）；
})
.on（'jcarouselcontrol:inactive'，function（）{
$（this.addClass（'inactive'）；
})
.jcarouselControl({
目标：'-=1'
});
/*下一个控件初始化*/
$（“.jcarousel控件下一步”）
.on（'jcarouselcontrol:active'，function（）{
$（this.removeClass（'inactive'）；
})
.on（'jcarouselcontrol:inactive'，function（）{
$（this.addClass（'inactive'）；
})
.jcarouselControl({
//选项在这里
目标：'+=1'
});
$（'.jcarousel control prev'）。在（'click'，function（）上{
updateCurrentPhotoId（-1）；
返回false；
});
$（'.jcarousel control next'）。在（'click'，function（）上{
updateCurrentPhotoId（+1）；
返回false；
});
/*分页初始化*/
$（'.jcarousel分页'）
.on（'jcarouselpagination:active'，'a'，function（）{
$（this.addClass（'active'）；
})
.on（'jcarouselpagination:inactive'，'a'，function（）{
$（this.removeClass（'active'）；
})
.jcarouselPagination({
});
});
})（jQuery）；
$（文档）.ready（函数（）{
loadPhoto（）；
});

---

感谢您的帮助！

要向下一个和上一个按钮添加代码，请使用按钮初始化代码的方法属性，如下所示（在“控制选项”部分）：

这个问题（）和我的一样，已经解决了。我会尽快调查并回答我的问题！

$('.jcarousel-control-prev')
    .on('jcarouselcontrol:active', function() {
        $(this).removeClass('inactive');
    })
    .on('jcarouselcontrol:inactive', function() {
        $(this).addClass('inactive');
    })
    .jcarouselControl({
        target: '-=1',
        'method': function(){
            this.carousel()
                // Following line must be there to keep the initial action (scroll to the previous image in this case)
                // and it uses a callback function where we can put the additional code
                .jcarousel('scroll', this.options('target'), function(){
                    // So here is my code, which is now always synchronized with the carousel state
                    updateCurrentPhotoId(-1);
                });      
            }
    });