12

我正在尝试获取JCarousel中当前项目的索引，以便可以向用户显示 Carousel 中的当前位置。例如，“13/20”。

我怎样才能做到这一点？

编辑：

最终产品样品：

轮播截图

4

11 回答 11

16

我认为您正在寻找的是 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-25T16:10:46.010 回答
2

您可以使用：

function trigger(carousel, state) { 
    index = carousel.index(carousel.last, size of list);
}
于 2012-05-26T21:46:17.147 回答
1

我发现这种突出显示可能包含答案的 jcarousel 控制器的方法。

于 2009-08-25T15:58:02.557 回答
1

老实说，这似乎并不像我从 jQuery 插件中所希望的那样明显。有两个回调itemVisibleInCallback和itemVisibleOutCallback，但它们只有在您一次只显示一张图像时才有用。

老实说，尽管我不想让你走上一条完全不同的道路，但我强烈建议使用循环插件进行轮播工作，因为它允许我通过 jCarousel 快速浏览可以看到更多更精细的自定义（对不起 jCarousel 作者 - 代码本身看起来很棒！）。

于 2009-08-25T16:10:30.813 回答
1

我也发现 jCarousel 在您需要它们时会返回不可用的 .first、.last、.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;

}

我不在 each() 中返回 id 的原因是因为 each() 是一个函数，并且返回只会返回该函数，而不是 getCurrentCarouselItem()。

于 2010-11-14T14:50:21.503 回答
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-07T06:48:35.110 回答
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-28T05:46:48.317 回答
1

如果你有分页（项目符号）

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

你可以简单地使用：

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

jcarousel 正在向活动项目符号添加“活动”类，如果项目符号上有数字，则只需通过 .html() 方法检索它们

您也可以通过 parseInt 将它们转换为整数：

var index = parseInt($('.active').html());
于 2014-10-27T20:00:06.443 回答
1

另一个使用 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');
    }
});
于 2018-05-14T02:39:34.973 回答
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 中的数字现在具有误导性。因此，我们需要使用 中的位置<li>来<ul>确定当前项的索引。

于 2016-05-31T05:39:17.427 回答
0 
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>
于 2018-07-30T04:32:54.717 回答