如何獲得循環輪播中jcarousel項目的索引號

我正嘗試使用jcarousel構建用戶界面。傳送帶需要能夠在任一方向上無限移動，因此使用wrap：circular進行配置。點擊旋轉木馬項目時，其相應的較大圖像需要顯示在主內容區域中。如何獲得循環輪播中jcarousel項目的索引號

當前頁面上的前兩個縮略圖將顯示所需的行爲。您可以在http://www.brookscustom.com/live-edge/live-edge.php#

的問題是看到這個，一旦你已經滾過頁面上項目的實際數量的旋轉木馬不會爲一個項目返回一個索引號。會發生什麼情況是，爲每個稱爲jcarouselindex的項目分配了一個自定義屬性，當您滾動時，該屬性只能在任一方向上無限上移或下移。我的下一個想法是爲每個列表項分配一個1，2，3等ID，但這些ID也會丟失，一旦你滾動頁面上的實際數量的李。所以，如果我有10個ID爲＃1-10的項目，當您滾動到「第11」項目的右側時，它不會像您預期的那樣擁有ID＃1。他們通過腳本授課，但不會保留您在頁面上提供的ID。

因此，爲了這個工作，我需要能夠訪問每個列表項的值，無論用戶滾動多遠，並使用它來定位適當的大圖像。有任何想法嗎？我很感激。

來源

2011-08-02 johnnyb

好，我添加自定義屬性的每個列表項內的元素。不理想，但它有訣竅。 – johnnyb

這就是我所做的......在實際項目中使用類似data-id的東西，這樣它就不會受到輪播導航的影響。 – bcm

看來你解決了你的問題，但我只是在實施與你非常相似的事情。我不知道你是否熟悉Knockout？這是一個可愛的小型圖書館，我會推薦與jcarousel一起使用。

基本上，你可以創建一個可觀察的圖像數組，添加到你的旋轉木馬，爲你的數組中的每個項目添加一個函數，在點擊旋轉木馬時觸發，這個函數在你的圖像中加載大版本的圖像內容區域。

來源

2011-11-09 11:01:36 Hazza

-1

寫這個代碼在側的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); 
        };

來源

2012-08-17 11:52:03 ThmHarsh

我碰到了同樣的問題。的解決方案是使用模函數（餘數）：

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

來源

2015-01-08 06:49:36 Andrew

如何獲得循環輪播中jcarousel項目的索引號

回答

相關問題