2

このコードを出力する本当に基本的な jquery カルーセルがあります。

<div class="flexslider">
    <ul class="slides">
        <li><a>red</a></li>
        <li><a>green</a></li>
        <li><a class="flex-active">blue</a></li>
        <li><a>black</a></li>
        <li><a>white</a></li>
    </ul>
</div>
<div id="count"></div>

現在のスライド番号 (スライド 3/5) を出力したいのですが、.index() を使用してもうまくいかないようです。「-1」として表示され続け、カルーセルがスライドしても更新されません。

var total = $('.carousel li').length;
var current = $(this).find('.flex-active');

$("#count").html($('li').index(current)  + ' of ' + total);

例: http://files.marksy.com/public/slider/index.html

4

4 に答える 4

2

それはすべて少しごちゃごちゃしています。$(this) はあなたの後のものではありません。また、li の子を見つけているので、インデックスが間違っているため、親を取得する必要があります。ちょっとすっきりしました。

http://jsfiddle.net/jozzhart/uMNvB/

var $slides = $('.slides li');
var $current = $slides.find('.flex-active').parent();

var index = $slides.index($current) + 1;
var total = $slides.length;

$("#count").html(index + ' of ' + total);
于 2013-03-11T20:53:30.843 に答える
1

出力するには、次のようなものがあります。

<div class="flexslider">
    <ul id="flex-UL" class="slides">
        <li><a>red</a></li>
        <li><a>green</a></li>
        <li id="flex-active"><a>blue</a></li>
        <li><a>black</a></li>
        <li><a>white</a></li>
    </ul>
</div>
<div id="count"></div>

そのベター実行可能

よりも：

var listItem = $('#flex-active');
var listTotal= $("#flex-UL li").size()
$('#count').html( 'Index: ' + $('li').index(listItem) + ' / ' + listTotal);

出力：

red
green
blue
black
white

インデックス: 2 / 5

于 2013-03-11T14:26:06.897 に答える
0

O そしてあなたのセットアップのために:

   var listItem = $(".flex-active").parent();
   var listTotal = $(".slides li").size();
   var listitemNow = $('li').index(listItem);
   listitemNow++;
   $('#count').html('Index: ' + listitemNow + ' of ' + listTotal);

出力：

red
green
blue
black
white

インデックス: 3/5

于 2013-03-11T14:58:47.577 に答える
0

あなたの例では、FlexSliderを使用しています。

$('.flexslider').flexslider({animation:"slide"});

FlexSlider は現在のスライド番号を格納し、after-callback を使用してこの値を取得できます。

$('.flexslider').flexslider({
    animation: "slide", 
    after: function(slider) {
        alert (slider.currentSlide);
    }
});

詳細については、ドキュメントを参照してください。これは「Advanced 」タブにあり、「 The new, Robust Callback API 」から始まります。

于 2013-03-11T14:07:45.150 に答える