Question

我正在尝试使用jcarousel构建用户界面。旋转木马需要能够在任一方向无限移动，因此使用wrap：circular进行配置。单击旋转木马项目时，其相应的较大图像需要显示在主要内容区域中。

目前，页面上的前两个缩略图将显示所需的行为。您可以在http://www.brookscustom.com/live-edge/live-edge.php#

看到这一点

问题是，当您滚动浏览页面上的实际项目数后，轮播将不会返回项目的索引编号。会发生的是，为每个名为jcarouselindex的项目分配了一个自定义属性，当您滚动时，该属性在任一方向上无限向上或向下。我的下一个想法是为每个列表项分配一个1,2,3等的id，但是当你滚动超过页面上li的实际数量时，那些id也会丢失。所以，如果我有10个id为＃1-10的项目，当你向右滚动到“第十一”项时，它将没有你想象的id＃1。它们由脚本提供类，但不会保留您在页面上提供的ID。

因此，为了实现这一点，我需要能够访问每个列表项的值，无论用户滚动多远，并使用它来定位正确的大图像。有任何想法吗？我很感激。

Answer 1

似乎你解决了问题，但我只是在实现与你非常相似的东西。我不知道你是否熟悉Knockout？这是一个甜蜜的小图书馆，我建议将它与jcarousel一起使用。

基本上你可以创建一个可观察的图像数组，将它添加到你的轮播中，为数组中的每个项添加一个函数，点击旋转木马时会激活该函数，这个函数会在你的内容中加载一个大版本的图像区域。

Answer 2

我遇到了同样的问题。解决方案是使用模数函数（除法后的余数）：

(idx + count) % count

这是在回调函数的上下文中使用的函数：

  var itemVisibleInCallback = function(carousel, item, idx, state) {
    var $thumbnails = $('.thumbnails img');
    var count = $thumbnails.length;
    var index = (idx + count) % count - 1; //subtract 1 so that the index will be 0-based
    $thumbnails.eq(index).addClass("selected");
  };

  $('.my-carousel').jcarousel({
    wrap: 'circular',
    itemVisibleInCallback: itemVisibleInCallback
    // other unrelated config values...
  });

如何在圆形转盘中获取jcarousel项的索引号

2 个答案: