【问题标题】:jQuery count up to a target number + counting elements in a divjQuery计数到目标数字+计数div中的元素
【发布时间】:2013-12-05 17:24:09
【问题描述】:

我正在使用一个名为 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-active)应用到活动幻灯片。

示例 - http://www.smallbone.co.uk/collections/kitchens/macassar(见右滑箭头)

【问题讨论】:

标签: jquery image count slider counting


【解决方案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>");

或者其他的......

【讨论】:

  • 抱歉由于更多的研究更新了我的问题,感谢您的回答
【解决方案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/

【讨论】:

    猜你喜欢
    • 2011-02-02
    • 2017-05-29
    • 1970-01-01
    • 2021-03-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-10-10
    • 2021-09-04
    相关资源
    最近更新 更多