2 个互相影响的 jcarousel

发布于 2024-12-06 13:41:15 字数 2286 浏览 1 评论 0原文

我有 2 个 jcarousel:

第一个像缩略图一样限制为 4

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

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

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

编辑:

如何将第二个 jcarousel 的位置发送到第一个 jcarousel 并更改位置(在第一个 jC 上)? 当第二个轮播上按下下一个/上一个按钮时,如何操作第一个轮播?

参见演示 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

I have 2 jcarousels:

First that acts like thumbnails limited to 4

Second that shows big image, only one

when clicked on the thumbnail the second jcarousel scrolls to the appropriate image, now that i manage to do.

the second jcarousel has prev/next buttons, when clicked it will scroll to the prev/next image, now the problem is that now the first (thumbnail) jcarousel should scroll to the appropriate thumbnail.

EDIT:

How to send position of second jcarousel to the first one and change postion (on first jC)?
When next/prev button is pressed on the second carousel, how to manipulate the first carousel?

See the demo http://www.mediafire.com/file/jj684d8uu6ycpa9/jcarousel_test.zip

(press on the thumbnailas, it will change the position of the second carousel, i need now to change the position of the selected thumbnail (thumbnail carousel) when the prev/next is clicked on second carousel)

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

The HTML and CSS (demo):
http://www.mediafire.com/file/jj684d8uu6ycpa9/jcarousel_test.zip

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

素手挽清风 2024-12-13 13:41:15

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

document.ready() 中每个轮播的回调函数指定为不同的函数:mycarousel_initCallbackmycarousel_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
});

});

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

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

You have attached same cllback functions for both carousel.

Specify the callback function for each carousel in document.ready() as different functions as: mycarousel_initCallback and 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
});

});

extract the code for the #showcasecarousel from mycarousel_initCallback and put it as a separate function:
as

 function mycarousel_initCallbackanother(carousel) {
  jQuery('.jcarousel-skin-showcase div.jcarousel-next').click(function(){
            //chage position on mycarousel
     });
 }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文