2 个互相影响的 jcarousel
我有 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技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您为两个轮播附加了相同的回调函数。
将 document.ready() 中每个轮播的回调函数指定为不同的函数:mycarousel_initCallback 和 mycarousel_initCallbackanother
从 #showcasecarousel 中提取代码mycarousel_initCallback 并将其作为单独的函数:
作为
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
extract the code for the #showcasecarousel from mycarousel_initCallback and put it as a separate function:
as