Fullpage.js使用鼠标滚轮滚动幻灯片

时间:2017-10-09 22:17:06

标签: javascript jquery html fullpage.js

我正在使用Fullpage.js进行水平和放大垂直滚动。我有5个部分,每个部分包含4个幻灯片。

我正在从这个问题实施解决方案: Fullpage.js Slide horizontal on scroll

除了我在每个部分都有4张幻灯片,我需要循环播放。除了最后一部分(第5部分)之外,当使用鼠标向下滚动时,每张幻灯片都有效。关于为什么最后一部分不会滚动幻灯片的任何想法?

此处的代码: https://codepen.io/anon/pen/rGvxzL

JS:

$(document).ready(function () {
    var slideIndex1 = 1;
    var slideIndex2 = 1;
    var slideIndex3 = 1;
    var slideIndex4 = 1;
    var slideIndex5 = 1;
    var sliding = false;
    $('#fullpage').fullpage({
        onLeave: function (index, nextIndex, direction) {
            if (index == 1 && !sliding) {
                if (direction == 'down' && slideIndex1 < 4) {
                    sliding = true;
                    $.fn.fullpage.moveSlideRight();
                    return false;
                } else if (direction == 'up' && slideIndex1 > 1) {
                    sliding = true;
                    $.fn.fullpage.moveSlideLeft();
                    return false;
                }
            }
            if (index == 2 && !sliding) {
                if (direction == 'down' && slideIndex2 < 4) {
                    sliding = true;
                    $.fn.fullpage.moveSlideRight();
                    return false;
                } else if (direction == 'up' && slideIndex2 > 1) {
                    sliding = true;
                    $.fn.fullpage.moveSlideLeft();
                    return false;
                }
            }
            if (index == 3 && !sliding) {
                if (direction == 'down' && slideIndex3 < 4) {
                    sliding = true;
                    $.fn.fullpage.moveSlideRight();
                    return false;
                } else if (direction == 'up' && slideIndex3 > 1) {
                    sliding = true;
                    $.fn.fullpage.moveSlideLeft();
                    return false;
                }
            }
            if (index == 4 && !sliding) {
                if (direction == 'down' && slideIndex4 < 4) {
                    sliding = true;
                    $.fn.fullpage.moveSlideRight();
                    return false;
                } else if (direction == 'up' && slideIndex4 > 1) {
                    sliding = true;
                    $.fn.fullpage.moveSlideLeft();
                    return false;
                }
            }
            if (index == 5 && !sliding) {
                if (direction == 'down' && slideIndex5 < 4) {
                    sliding = true;
                    $.fn.fullpage.moveSlideRight();
                    return false;
                } else if (direction == 'up' && slideIndex5 > 1) {
                    sliding = true;
                    $.fn.fullpage.moveSlideLeft();
                    return false;
                }
            }
            else if (sliding) {
                return false;
            }
        },
        afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
            sliding = false;
        },
        onSlideLeave  : function (anchorLink, index, slideIndex, direction, nextSlideIndex) {
            if (index == 1){
                if (direction == 'right') {
                    sliding = true;
                    slideIndex1++;
                }

                if (direction == 'left') {
                    sliding = true;
                    slideIndex1--;
                }
            }
            if (index == 2) {
                if (direction == 'right') {
                    sliding = true;
                    slideIndex2++;
                }

                if (direction == 'left') {
                    sliding = true;
                    slideIndex2--;
                }
            }
            if (index == 3) {
                if (direction == 'right') {
                    sliding = true;
                    slideIndex3++;
                }

                if (direction == 'left') {
                    sliding = true;
                    slideIndex3--;
                }
            }
             if (index == 4) {
                if (direction == 'right') {
                    sliding = true;
                    slideIndex4++;
                }

                if (direction == 'left') {
                    sliding = true;
                    slideIndex4--;
                }
            }
            if (index == 5) {
                if (direction == 'right') {
                    sliding = true;
                    slideIndex5++;
                }

                if (direction == 'left') {
                    sliding = true;
                    slideIndex5--;
                }
            }
        }
    });
});

HTML:

<div id="fullpage">
    <div class="section" id="section1">
        <div class="slide"> A-1 </div>
        <div class="slide"> A-2 </div>
        <div class="slide"> A-3 </div>
        <div class="slide"> A-4</div>
    </div>
    <div class="section" id="section2">
        <div class="slide"> B-1 </div>
        <div class="slide"> B-2 </div>
        <div class="slide"> B-3 </div>
        <div class="slide"> B-4 </div>
    </div>
    <div class="section" id="section3">
        <div class="slide"> C-1 </div>
        <div class="slide"> C-2 </div>
        <div class="slide"> C-3 </div>
        <div class="slide"> C-4 </div>
    </div>
    <div class="section" id="section4">
        <div class="slide"> D-1 </div>
        <div class="slide">D-2 </div>
        <div class="slide"> D-3 </div>
        <div class="slide"> D-4 </div>
    </div>
    <div class="section" id="section5">
        <div class="slide"> E-1 </div>
        <div class="slide"> E-2 </div>
        <div class="slide"> E-3 </div>
        <div class="slide"> E-4 </div>
    </div>
</div>

0 个答案:

没有答案