jQuery计数到一个目标数字+一个div中的计数元素

Question

我正在使用一个名为superslides的滑块。我正在尝试显示当前幻灯片以及单击下一个和上一个时自动递减和递增的幻灯片数量。到目前为止，我有以下代码；

var totalItems = $('.slides-container img').length;
  var currentIndex = $('div.slide-active').index() + 1;
  $('.num').html(''+currentIndex+'/'+totalItems+'');
  $('#multiple-slides').superslides({
    hashchange: false,
    pagination: false,
    animation: 'fade',
    play: 4000,
  });  
  $('#multiple-slides').bind('animated.slides', function() {
      currentIndex = $('div.slide-active').index() + 1;
     $('.num').html(''+currentIndex+'/'+totalItems+'');
  }); 

如果我能将一个活动类（在我的情况下是.slide活动）应用到活动幻灯片上，我想这会起作用。

示例-http://www.smallbone.co.uk/collections/kitchens/macassar（见右滑动箭头）

Answer 1

只需为当前幻灯片创建一个变量。做一些类似的事情：

var sliderLength = $('.slides-container img').length;
var currentSlide = 1;

那么你可能会有下一张幻灯片和上一张幻灯片的功能。我不知道。你只需要在相应的函数中增加/减少currentSlide的值，例如

function nextSlide() {
     // Do some stuff
     currentSlide++;
}

和

function prevSlide() {
     // Do some stuff
     currentSlide--;
}

然后，您可以用这样简单的东西用当前的新幻灯片更新DOM

$(".current-slide").html("<p>" + currentSlide + "/" + sliderLength + "</p>");

或者其他什么。。

Answer 2

 var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{
    (function(index){
        g.children[i].onclick = function(){
              alert(index + "/7")  ;
        }    
    })(i);
}

检查链接：http://jsfiddle.net/PgEcn/4/