Question

我有2个jcarousels：

首先，缩略图的行为仅限于4

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

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

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

修改

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

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

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

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

您已为两个轮播附加了相同的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
     });
 }

2个jcarousels相互影响

1 个答案: