两个传送带相互影响

Question

我有两个传送带：

首先，像缩略图一样限制在4

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

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

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

编辑：

如何将第二个旋转木马的位置发送到第一个，并改变位置(在第一个jC上)？当在第二个旋转木马上按下next/prev按钮时，如何操作第一个旋转木马？

请参阅演示http://www.mediafire.com/file/jj684d8uu6ycpa9/jcarousel_test.zip

(按下拇指钉，它将改变第二个旋转木马的位置，当在第二个旋转木马上单击prev/next时，我现在需要更改选定的缩略图(缩略图旋转木马)的位置)。

联署材料：

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

您已经为两个旋转木马附加了相同的cllback函数。

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