0

自分で作成したスライダーがあります。これは、無限にループするカルーセルです。カウンター（1 of 4、2 of 4）などを作成したいと思います。最後の数字は、存在するスライドの総数と、表示しているスライドの1/2/3/4ディスプレイです。

これは私が私のカウンターのためにこれまでに持っているものです：

var $tota = $('.past-project-container').find('span.total');
var $curr = $('.past-project-container').find('span.current');

function changeCurr(){
    $tota.text(numberOfProjects);
    $curr.text(1);
}
    changeCurr();

HTML：

<span class="slide-count-container">
   <span class="current">1</span> of <span class="total">1</span>
</span>

そして、これはカルーセルの私のJSです

var $carousel = $('.past-project-slider'), carW = $carousel.outerWidth(), intv;
$carousel.wrapInner('<div id="slider" />');
var $slider = $('#slider');
numberOfProjects = $('.past-project-each').length;
$slider.css({position:'absolute',left:0, width:carW*numberOfProjects}).find('.past-project-each').css({'float':'left'});

function move(cb){
  if(!$slider.is(':animated')){
    if(cb=='next'){
        $slider.animate({left:-carW},800,function(){
            $slider.append($('.past-project-each:first'));
            $slider.css({left:0});
        });    
    }else{
        $slider.prepend($('.past-project-each:last'));
        $slider.css({left:-carW});
        $slider.animate({left:0},800); 
    }
  }
}

$('#next-past-project, #prev-past-project').click(function(){  
    var btn = this.id=='next-past-project' ? move('next') : move('prev');  
});

どうもありがとう、R

4

1 に答える 1

1

要素の内容を絶えず読み取って変換するよりも$curr、次のように別の変数を追跡する方がおそらく良いでしょう。

var $tota = $('.past-project-container').find('span.total');
var $curr = $('.past-project-container').find('span.current');

var currentIndex = 0;

function changeCurr(){
    $tota.text(numberOfProjects);

    // If we've not reached the final index, add one, else return to the start
    currentIndex = (currentIndex == numberOfProjects) ? 1 : currentIndex + 1;
    $curr.text(currentIndex);
}

changeCurr();

これは最後のスライドまでカウントアップします。changeCurr()スライドトランジションごとに必ず呼び出してください。

于 2013-02-08T19:24:30.827 に答える