0

我有一个自己制作的滑块，它是一个无限循环的旋转木马。我想创建一个计数器（4 个中的 1 个，4 个中的 2 个）等，最后一个数字是当前幻灯片的总数和 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');  
});

非常感谢，

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