我正在使用fullpage.js具有多个水平滑块。基本上,您可以垂直滚动到每个滑块,然后在每个部分中水平滑动。我要做的是显示每个部分的当前幻灯片/总幻灯片。我遇到的问题是,由于它们都具有相同的类,因此要获取整个页面的总和而不是每个部分的总和,而且自从所有幻灯片获取“活动”类以来,当前幻灯片都不会更改。
的HTML
<div class="section" id="section1" >
<div class="slide" id="golf1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
<div class="slideContent">
<div class="num"></div>
</div>
</div>
<div class="section" id="section2">
<div class="slide" id="skills1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
<div class="slideContent">
<div class="num"></div>
</div>
</div>
JS
var totalItems = $('.slide').length;
var currentIndex = $('.slide.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
这是为您准备的小提琴,还有正在运行的jquery
我对答案进行了相当大的编辑,以包含在事件上运行的功能,为此,我仅在部分上使用了“单击”,显然您会希望为事件更改此功能。我还添加了有关当前幻灯片索引的警报,因此您可以看到它正在工作。
若要使用,只需使用要为其更新计数器的部分的索引(从0开始)调用slideCounts()函数。每个循环将计数器添加到准备就绪的文档上。
小提琴:http : //jsfiddle.net/168xofn3/4/
jQuery-您要遍历所有部分,计算该部分中的幻灯片,然后获取活动幻灯片。然后输出每个部分的活动幻灯片/总幻灯片。
$('.section').each(function(i){
slideCounts(i);
});
$('.section').on('click',function(){
var i = $(this).index();
slideCounts(i);
});
function slideCounts(i){
var elm = $('.section').eq(i);
var total = elm.find('.slide').length;
var current = elm.find('.active').index();
current++;
elm.find('.num').html(''+current+'/'+total+'');
alert(current); //remove this alert
}
我还对您的标记进行了一些更改,以使示例可以正常工作
<div class="section" id="section1" >
<div class="slide"></div>
<div class="slide active"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slideContent">
<div class="num"></div>
</div>
</div>
<div class="section" id="section2" >
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide active"></div>
<div class="slideContent">
<div class="num"></div>
</div>
</div>
<div class="section" id="section3" >
<div class="slide active"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slideContent">
<div class="num"></div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句