使用多个滑块获取当前幻灯片和总幻灯片

派克

我正在使用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+'');
qui

这是为您准备的小提琴,还有正在运行的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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用多个滑块获取当前和全部幻灯片

来自分类Dev

需要获取当前的幻灯片编号-基本的JQuery滑块

来自分类Dev

使用 PowerPoint Interop 获取幻灯片的页眉和页脚

来自分类Dev

Caroufredsel图像滑块-获取可见幻灯片的编号

来自分类Dev

BX滑块并滚动垂直幻灯片

来自分类Dev

如何获取Google幻灯片标题和幻灯片编号的列表-Google Apps脚本

来自分类Dev

幻灯片功能

来自分类Dev

幻灯片溢出?

来自分类Dev

Snooks 幻灯片

来自分类Dev

使用滑块手柄拖动图像幻灯片

来自分类Dev

使用幻灯片母版更新PowerPoint 2013幻灯片的页眉和页脚

来自分类Dev

在JQuery Cycle中,如何获取当前幻灯片的src?

来自分类Dev

如何获取幻灯片的当前图片来源?

来自分类Dev

当前位置的Android幻灯片动画

来自分类Dev

多个jQuery幻灯片实例

来自分类Dev

幻灯片放映中的多个图像

来自分类Dev

多个幻灯片显示的结果奇怪

来自分类Dev

幻灯片菜单获取元素onclick

来自分类Dev

无法获取活动幻灯片的索引

来自分类Dev

幻灯片和视频应用

来自分类Dev

幻灯片和视频应用

来自分类Dev

图像幻灯片放映和 IF 条件

来自分类Dev

如何使用fancyBox创建幻灯片?

来自分类Dev

使用animate()的简单jQuery幻灯片

来自分类Dev

使用CSS的幻灯片过渡

来自分类Dev

使用angularjs的CSS幻灯片动画

来自分类Dev

在幻灯片放映中使用StopInterval()

来自分类Dev

使用CSS / HTML移动幻灯片

来自分类Dev

使用JS数组的幻灯片放映