获取指数当前项目中的jCarousel(Getting Index of Current Item

2019-08-02 12:08发布

站内文章 / 前端开发

27 0

戒情不戒烟

女 | 书童

私信

我试图获得在当前项目的索引的jCarousel ，这样我可以显示传送带内给用户的当前位置。例如，'13 / 20' 。

我怎样才能做到这一点？

编辑：

最终产品的样品：

Answer 1:

我知道你在寻找的是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>

Answer 2:

您可以使用：

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

Answer 3:

它似乎并不那么明显，因为我会从一个jQuery插件，希望是诚实的。有两个回调itemVisibleInCallback和itemVisibleOutCallback ，但是他们只打算如果你每次只显示一个图像是有用的。

说实话，我很讨厌你发下来一个完全不同的路径很多，我会强烈建议使用周期插件的旋转木马的工作，因为它允许多，更精细的定制会，我可以从我快看识破的jCarousel（遗憾的jCarousel作者 - 代码本身看起来辉煌！）。

Answer 4:

我也发现，在的jCarousel，你需要他们的时候返回不可用。第一，。去年，.prevFirst和.prevLast性能。

因此，我不得不这样做的肮脏的方式，并决定，通过阅读它是否的左偏移高于零编写返回者为准L1标签目前在容器中的第一个ID的功能。如果是这样，这是第一个与零度以上的左侧位置，这是我当前的幻灯片。

下面的代码假定你已经把一个id =“列表项-N”列表中的标签在你的foreach（）循环，其中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（）。

Answer 5:

你要怎么做，取决于但这里是一个更“通用的方法”做同样的，而不是返回对象本身，而不是ID为：

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

Answer 6:

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

Answer 7:

您可以挂接到“的jCarousel：动画”事件，并抓住当前幻灯片作为一个jQuery对象。

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

Answer 8:

如果您有分页（子弹）

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

你可以简单的使用方法：

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

的jCarousel是添加类“主动”，以活性弹头，如果你有子弹的数字，您刚才的.html检索它们（）方法

你也可以把他们通过parseInt函数整数：

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

Answer 9:

如果您的传送带上的物品可以重新排序，唯一可靠的方法，我发现获得指标的当前项目是：

$('#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>当前项目的确定指标。

Answer 10:

另一种解决方案获得使用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');
    }
});

Answer 11:

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')); 
}

你可以使用任何数量的属性来indentify内部幻灯片和数据

<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>

文章来源: Getting Index of Current Item in JCarousel