单页部署两个jCarousel联动轮播实例的问题咨询

你的思路方向是对的，但只修改JS里的变量定义还不够——核心问题是原示例的JS代码使用了全局类选择器，导致所有匹配的轮播组件被绑定到同一组事件逻辑里，才出现第一组缩略图控制所有大图、第二组无响应的情况。要让两组联动轮播独立工作，需要从HTML类名区分到JS事件绑定做完整的改造：

第一步：修改HTML，给第二组轮播添加唯一类名 #

把第二组的舞台和导航组件的类名改成和第一组不同的标识，比如：

<!-- 第二组轮播的舞台 -->
<div class="carousel carousel-stage-2">
  <!-- 图片列表不变 -->
</div>

<!-- 第二组轮播的导航 -->
<div class="carousel carousel-navigation-2">
  <!-- 缩略图列表不变 -->
</div>

同时，第二组的前后按钮可以通过父容器区分，避免和第一组的按钮事件冲突（后面JS会用到）。

第二步：重构JS代码，每组轮播单独初始化并绑定联动逻辑 #

原示例的JS是把所有.carousel-stage和.carousel-navigation绑定在一起，现在需要拆分出两组独立的逻辑：

// 第一组轮播初始化与联动
var carouselStage1 = $('.carousel-stage').jcarousel();
var carouselNavigation1 = $('.carousel-navigation').jcarousel();

// 第一组：缩略图滚动同步到大图
carouselNavigation1.on('jcarousel:scroll', function(event, carousel) {
  carouselStage1.jcarousel('scroll', carousel.target());
});

// 第一组：大图滚动同步到缩略图
carouselStage1.on('jcarousel:scroll', function(event, carousel) {
  carouselNavigation1.jcarousel('scroll', carousel.target());
});

// 第一组：绑定前后按钮事件
$('.connected-carousels:eq(0) .prev-stage').jcarouselControl({
  target: '-=1',
  carousel: carouselStage1
});
$('.connected-carousels:eq(0) .next-stage').jcarouselControl({
  target: '+=1',
  carousel: carouselStage1
});
$('.connected-carousels:eq(0) .prev-navigation').jcarouselControl({
  target: '-=1',
  carousel: carouselNavigation1
});
$('.connected-carousels:eq(0) .next-navigation').jcarouselControl({
  target: '+=1',
  carousel: carouselNavigation1
});

// 第二组轮播初始化与联动
var carouselStage2 = $('.carousel-stage-2').jcarousel();
var carouselNavigation2 = $('.carousel-navigation-2').jcarousel();

// 第二组：缩略图滚动同步到大图
carouselNavigation2.on('jcarousel:scroll', function(event, carousel) {
  carouselStage2.jcarousel('scroll', carousel.target());
});

// 第二组：大图滚动同步到缩略图
carouselStage2.on('jcarousel:scroll', function(event, carousel) {
  carouselNavigation2.jcarousel('scroll', carousel.target());
});

// 第二组：绑定前后按钮事件（通过父容器索引区分）
$('.connected-carousels:eq(1) .prev-stage').jcarouselControl({
  target: '-=1',
  carousel: carouselStage2
});
$('.connected-carousels:eq(1) .next-stage').jcarouselControl({
  target: '+=1',
  carousel: carouselStage2
});
$('.connected-carousels:eq(1) .prev-navigation').jcarouselControl({
  target: '-=1',
  carousel: carouselNavigation2
});
$('.connected-carousels:eq(1) .next-navigation').jcarouselControl({
  target: '+=1',
  carousel: carouselNavigation2
});

为什么原方案不行？ #

原示例的JS中，$('.carousel-stage')会选中页面上所有这个类的元素，当绑定滚动事件时，所有大图轮播都会响应任意一个缩略图轮播的滚动——这就是第一组缩略图能控制两组大图的原因。而第二组缩略图的事件因为和第一组重复绑定，没有关联到对应的第二组大图，所以点击无反应。

通过给每组轮播添加唯一类名，再分别初始化和绑定事件，就能让两组联动轮播完全独立工作了。

内容的提问来源于stack exchange，提问作者Jaime Montoya