Question

我有一个我自己制作的滑块，这是一个无限循环的旋转木马。我想要创建一个计数器（4个中的1个，2个中的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

Answer 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()。

更新滑块中的计数器

1 个答案: