獲取JCarousel中當前項的索引
[英]Getting Index of Current Item in JCarousel
11 個解決方案
解決方案1
16 已采納 2009-08-25 16:10:46
我認為您正在尋找的是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>
解決方案2
2 2012-05-26 21:46:17
您可以使用：
function trigger(carousel, state) {
index = carousel.index(carousel.last, size of list);
}
解決方案3
1 2009-08-25 15:58:02
我找到了突出顯示可能包含答案的jcarousel控制器的方法。
解決方案4
1 2009-08-25 16:10:30
它看起來並不像我希望jQuery插件那么明顯。 有兩個回調項itemVisibleInCallback和itemVisibleOutCallback ，但如果你一次只顯示一個圖像，它們將會很有用。
老實說，盡管我討厭讓你走上一條完全不同的道路，我強烈建議使用循環插件進行輪播工作，因為它允許我通過jCarousel快速查看的更多更精細的定制（對不起jCarousel作者 - 代碼本身看起來很棒！）。
解決方案5
1 2014-04-28 05:46:48
您可以掛鈎'jcarousel：animate'事件，並將當前幻燈片作為jQuery對象獲取。
$('#mycarousel').on('jcarousel:animate', function(event, carousel) {
console.log(carousel._target); // this outputs your current slide as jQuery object.
});
解決方案6
1 2014-10-27 20:00:06
如果你有分頁（子彈）
<p class="jcarousel-pagination"></p>
你可以簡單地使用：
var index = $('.active').html();
jcarousel正在將類'active'添加到活動項目符號中，如果你在項目符號上有數字，你只需通過.html（）方法檢索它們
您也可以通過parseInt將它們轉換為整數：
var index = parseInt($('.active').html());
解決方案7
1 2010-11-14 14:50:21
我也發現jCarousel在你需要的時候返回不可用的.first，.last，.prevFirst和.prevLast屬性。
因此，我必須以臟方式執行它並決定編寫一個函數，通過讀取它的左偏移量是否大於零，返回容器中當前第一個li標簽的ID。 如果是這樣，並且它是第一個左上位置為零的，那就是我當前的幻燈片。
以下代碼假定您在foreach（）循環中的list標記中放置了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;
}
我沒有在each（）中返回id的原因是因為each（）是一個函數，返回只返回該函數，而不是getCurrentCarouselItem（）。
解決方案8
1 2010-12-07 06:48:35
取決於你想做什么，但這里有一個更“通用的方式”來做同樣的事情，而不是你返回對象本身而不是id：
var currSlide = 0;
function getCurrentCarouselItem(){
$("ul#ulcol li.licol").each(function(){
if ($(this).offset().left >= 0){
currSlide = this;
return false;
}
});
return currSlide;
}
解決方案9
0 2016-05-31 05:39:17
如果您的輪播中的項目可以重新訂購，我發現獲得當前項目索引的唯一可靠方法是：
$('#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'))可檢索的jcarousel:animateend 。
但是，一旦您開始重新排序輪播中的項目，該事件將不再有用，並且ID中的數字現在具有誤導性。 所以，我們需要使用的位置<li>在<ul>當前項目的確定指標。
解決方案10
0 2018-05-14 02:39:34
使用jquery獲取項目的當前索引的另一個解決方案...
//jcarousel item becomes visible
$('.jcarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
// "this" refers to the item element
itemCount = $(".jcarousel li").length; //1 based
currentIndex = ($( "li" ).index($(this))); //0 based
if(currentIndex + 1 == itemCount) {
alert('last');
}
if(currentIndex == 0) {
alert('first');
}
});
解決方案11
0 2018-07-30 04:32:54
var jcarousel = $('.jcarousel').on('jcarousel:createend', function(event, carousel) {
do_something_with_current_slide(carousel); //in case if you need current slide on the begining
})
.on('jcarousel:animateend', function(event, carousel) {
do_something_with_current_slide(carousel); //do something with current slide right after animation ends
})
.jcarousel({
wrap: 'circular'
});
function do_something_with_current_slide(carousel){
li = carousel._target; //li of current slide
alert(li.attr('slide'));
}
您可以使用任意數量的屬性來識別內部的幻燈片和數據
<ul id="mycarousel" class="jcarousel-skin-tango">
<li slide="1" currency="EUR"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75"/></li>
<li slide="2" currency="USD"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75"/></li>
<li slide="3" currency="UAH"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75"/></li>
</ul>
獲取Javascript中每個箭頭函數的當前項目的索引
[英]Getting the index of the current item in for each arrow function in Javascript
在“ with”綁定上下文中獲取當前的“ foreach”項目
[英]Getting the current 'foreach' item inside a context of 'with' binding
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.