獲取JCarousel中當前項目的索引

15

我想你要找的是carousel.first，它會給你第一個可見元素的索引（還有carousel.last以顯示最後一個可見元素）。

下面是一個例子的它的使用，根據與另外carousel.first變量和itemLoadCallback事件的簡單轉盤例如：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#mycarousel').jcarousel({ 
     itemLoadCallback: trigger 
    }); 
}); 

function trigger(carousel, state) 
{ 
    $("#currentImg").html(carousel.first); 
} 

</script> 

</head> 
<body> 
<div id="wrap"> 
    <h1>jCarousel</h1> 
    <h2>Riding carousels with jQuery</h2> 

    <h3>Simple carousel</h3> 
    <p> 
    This is the most simple usage of the carousel with no configuration options. 
    </p> 

    <ul id="mycarousel" class="jcarousel-skin-tango"> 
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> 
    </ul> 

    Current Photo <span id="currentImg">1</span> 

</div> 
</body>

來源

2009-08-25 16:10:46 HenryRat

+0

我認爲，到第一次，但第一次和最後一次不工作，當多個圖像可見作爲第一個可見圖像，最後一個可見圖像並不總是當前圖像... – Steerpike 2009-08-25 16:26:34

+0

對不起，我不是充分理解你在說什麼？使用jcarousel的簡單示例（使用三個圖像並水平滾動），carousel.first將返回最左側的元素，而carousel.last將返回最右側的元素。在每次按左右箭頭執行下一個和上一個操作時，會觸發itemLoadCallback事件，傳遞輪播數據使您能夠檢查第一個和最後一個元素。無論你認爲哪一個是你可以顯示的當前一個，如果你認爲中間是最新的，那麼使用這些來確定中間索引。 – HenryRat 2009-08-25 16:36:22

+0

謝謝......這對我有幫助。 – 2009-09-05 01:49:46

1

我發現highlighting the jcarousel controller這種方法可能包含答案。

來源

2009-08-25 15:58:02 jjclarkson

1

這看起來不像我從jQuery插件所希望的那樣明顯。有兩個回調itemVisibleInCallback和itemVisibleOutCallback，但它們只在一次只顯示一個圖像時纔有用。老實說，儘管我不想讓你失去一條完全不同的道路，但我強烈建議使用cycle plugin作爲旋轉木馬工作，因爲它允許更多更好的自定義，我可以通過快速查看jCarousel（對不起jCarousel作者 - 代碼本身看起來很棒！）。

來源

2009-08-25 16:10:30 Steerpike

1

我也發現，返回的jCarousel。首先不可用，。最後，.prevFirst和.prevLast屬性在你需要它們的時候。

因此，我不得不這樣做的骯髒的方式，並決定寫一個函數，通過讀取它的左偏移量是否在零以上，返回容器中當前第一個li標籤的ID。如果是這樣，這是第一個左上角位置在零以上的，這是我目前的幻燈片。

以下代碼假定您已經在foreach（）循環的列表標記中放置了一個id =「listitem-N」，其中N是當前迭代。

var currSlide = 0; 

function getCurrentCarouselItem(){ 

    $("ul#use-cases li.use-case").each(function(){ 

     var leftPos = $(this).offset().left; 

     if(leftPos >= 0){ 

      var id = $(this).attr('id').split("-"); 

      currSlide = id[1]; 

      return false; 

     } 

    }); 

    return currSlide; 

}

我之所以不返回ID中的每一個（），是因爲每一個（）是一個函數，並返回只返回該功能，不getCurrentCarouselItem（）。

來源

2010-11-14 14:50:21 jorisw

1

所依賴的你想要做什麼，但這裏是一個更「通用的方法」做同樣的，而不是返回對象本身，而不是ID爲：

var currSlide = 0; 
    function getCurrentCarouselItem(){ 
     $("ul#ulcol li.licol").each(function(){ 
     if ($(this).offset().left >= 0){ 
      currSlide = this; 
      return false; 
     } 
     }); 
    return currSlide; 
    }

來源

2010-12-07 06:48:35 poupougnac

2

您可以使用：

function trigger(carousel, state) { 
    index = carousel.index(carousel.last, size of list); 
}

來源

2012-05-26 21:46:17 patrick

1

您可以掛鉤'jcarousel：animate'事件，並將當前幻燈片作爲jQuery對象獲取。

$('#mycarousel').on('jcarousel:animate', function(event, carousel) { 
    console.log(carousel._target); // this outputs your current slide as jQuery object. 
});

來源

2014-04-28 05:46:48

1

如果您有分頁（子彈）

<p class="jcarousel-pagination"></p>

，你可以簡單地使用：

var index = $('.active').html();

的jCarousel是添加類 '主動'，以積極的子彈，如果你在有一個數字子彈你只需通過.html（）方法檢索它們

也可以通過parseInt將它們轉換爲整數：

var index = parseInt($('.active').html());

來源

2014-10-27 20:00:06

0

如果您的傳送帶上的物品可以重新排序，我發現來獲得當前項目的索引的唯一可靠的方法是：

$('#myCarousel').on('jcarousel:visiblein', 'li', function(event, carousel) { 
    var index = $('#'+this.id).index(); 
    console.log('++ index: %s', index); 
});

這裏的原因。

您會注意到傳送帶中每件商品的this.id與image-1類似，其中1是訂單更改前傳送帶中商品的原始索引。該索引似乎是使用jcarousel:animateend事件可檢索的內容，並且調用carousel.index($(this).jcarousel('first'))。

但是，一旦開始重新排序傳送帶中的項目，該事件不再有用，並且ID中的數字現在已引起誤解。因此，我們需要使用<ul>中<li>的位置來確定當前項目的索引。

來源

2016-05-31 05:39:17

獲取JCarousel中當前項目的索引

回答

相關問題