如何获得循环轮播中jcarousel项目的索引号

Question

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

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

的问题是看到这个，一旦你已经滚过页面上项目的实际数量的旋转木马不会为一个项目返回一个索引号。会发生什么情况是，为每个称为jcarouselindex的项目分配了一个自定义属性，当您滚动时，该属性只能在任一方向上无限上移或下移。我的下一个想法是为每个列表项分配一个1，2，3等ID，但这些ID也会丢失，一旦你滚动页面上的实际数量的李。所以，如果我有10个ID为＃1-10的项目，当您滚动到“第11”项目的右侧时，它不会像您预期的那样拥有ID＃1。他们通过脚本授课，但不会保留您在页面上提供的ID。

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

Answer 1

看来你解决了你的问题，但我只是在实施与你非常相似的事情。我不知道你是否熟悉Knockout？这是一个可爱的小型图书馆，我会推荐与jcarousel一起使用。

基本上，你可以创建一个可观察的图像数组，添加到你的旋转木马，为你的数组中的每个项目添加一个函数，在点击旋转木马时触发，这个函数在你的图像中加载大版本的图像内容区域。

Answer 2

写这个代码在侧的document.ready功能

 function mycarousel_initCallback(
             carousel) { 

            //alert(this.mycarousel); 
           // alert("inside carousel"); 
            // Disable autoscrolling if 
            // the user clicks the prev 
            // or next button. 
            carousel.buttonNext 
              .bind(
                'click', 
                function() { 
                 carousel 
                   .startAuto(0); 
                }); 

            carousel.buttonPrev 
              .bind(
                'click', 
                function() { 
                 carousel 
                   .startAuto(0); 
                }); 

            // Pause autoscrolling if 
            // the user moves with the 
            // cursor over the clip. 
            carousel.clip 
              .hover(
                function() { 
                 carousel 
                   .stopAuto(); 
                }, 
                function() { 
                 carousel 
                   .startAuto(); 
                }); 
           } 


           jQuery('#mycarousel') 
             .jcarousel(
               { 
                auto : 2, 
                scroll : 1, 
                wrap : 'last', 
                initCallback : mycarousel_initCallback, 
                itemFallbackDimension: 300, 
                //size: mycarousel_itemList.length, 
                itemFirstInCallback:mycarousel_itemFirstInCallback 
                // itemLoadCallback: {onBeforeAnimation: 
              //mycarousel_itemLoadCallback} 

               });// carousel 
          }); 

        $(".jcarousel-prev") 
        .after(
          "<div><h6 id=\"myHeader\" style=\"color:#FFFFFF;width:68%; top:85%; left:40px;font-size:100%; display: block;\" class=\"counterL\"></h6></div>"); 
        function display(s) { 
        $('#myHeader').html(s); 
        }; 

        function mycarousel_itemFirstInCallback(carousel, item, idx, state) { 
         display(idx +"<i> of </i>"+ $("#mycarousel li").length); 
        }; 

Answer 3

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

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