Question

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

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

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

我的问题是当我非常快地点击下一个（或上一个）：图像变化缓慢（即使我在同一秒内点击两次，“只应用一个下一个”（它没有' t打破动画以应用我的两次点击也不记得，在显示下一个图像后，我点击两次并且它应该再次“再做一次”）但是我的代码（updateCurrentPhotoId）是每次点击都会执行。

因此，要清楚，如果我在第一张图像上并且在Next上快速点击3次，则currentPhotoId会增加3倍（这很酷），但会显示第二张图像，而不是第三张图像。如果我正常点击（我等到动画完成再次点击下一步），没关系。但如果我太快，我的计数器和旋转木马不再同步（因此显示的数据与显示的照片无关......）。

我以为我可以为我的功能添加一些延迟，等于动画持续时间，但我不知道如何。

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

这是示例的代码：

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

感谢您的帮助！

Answer 1

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

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

覆盖JCarousel导航功能，同时保持个人（覆盖）代码与轮播同步

1 个答案: