2 jcarousels 相互影响

Question

我有 2 个 jcarousels：

首先，它的作用类似于限制为 4 个的缩略图

第二个显示大图，只有一个

当点击缩略图时，第二个 jcarousel 滚动到适当的图像，现在我设法做到了。

第二个 jcarousel 有 prev/next 按钮，点击它会滚动到 prev/next 图像，现在的问题是现在第一个（缩略图）jcarousel 应该滚动到适当的缩略图。

编辑：

如何将第二个 jcarousel 的位置发送到第一个并更改位置（在第一个 jC 上）？ 在第二个轮播上按下next/prev按钮时，如何操作第一个轮播？

查看演示http://www.mediafire.com/file/jj684d8uu6ycpa9/jcarousel_test.zip

（按缩略图，它会改变第二个轮播的位置，我现在需要在第二个轮播上单击上一个/下一个时更改所选缩略图（缩略图轮播）的位置）

JS：

function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('rel')));

        jQuery('.jcarousel-control a').removeClass('active');
        jQuery(this).addClass('active');

        jQuery('.jcarousel-item').removeClass('highliht');
        jQuery('.jcarousel-item-'+jQuery(this).attr('rel')).addClass('highliht');

        return false;
    });
    jQuery('#mycarousel li.jcarousel-item').click(function() {
        jQuery('.jcarousel-item').removeClass('highliht');
        jQuery(this).addClass('highliht');

        jQuery('.jcarousel-control a').removeClass('active');
        jQuery('.jcarousel-control a#cnt-'+jQuery(this).attr('jcarouselindex')).addClass('active');
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('jcarouselindex')));

        return false;
    });
    jQuery('.jcarousel-skin-showcase div.jcarousel-next').click(function(){
            //chage position on mycarousel
    });

}

jQuery(document).ready(function() {
    //set border on first thumbnail & control
    jQuery('.jcarousel-control a#cnt-1').addClass('active');
    jQuery('#mycarousel li:first').addClass('highliht');


    jQuery('#mycarousel').jcarousel({
        scroll: 4,
        initCallback: mycarousel_initCallback
    });
    jQuery('#showcasecarousel').jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback
    });
});

HTML 和 CSS（演示）： http://www.mediafire.com/file/jj684d8uu6ycpa9/jcarousel_test.zip

Answer 1

您为两个轮播附加了相同的回调函数。

将 document.ready() 中每个轮播的回调函数指定为不同的函数：mycarousel_initCallback 和 mycarousel_initCallbackanother

jQuery(document).ready(function() {
jQuery('.jcarousel-control a#cnt-1').addClass('active');
jQuery('#mycarousel li:first').addClass('highliht');


jQuery('#mycarousel').jcarousel({
    scroll: 4,
    initCallback: mycarousel_initCallback
});

jQuery('#showcasecarousel').jcarousel({
    scroll: 1,
    initCallback: mycarousel_initCallbackanother
});

});

从 mycarousel_initCallback 中提取#showcasecarousel 的代码并将其作为单独的函数： 作为

 function mycarousel_initCallbackanother(carousel) {
  jQuery('.jcarousel-skin-showcase div.jcarousel-next').click(function(){
            //chage position on mycarousel
     });
 }