fullPage js - 连续使用两个moveTo()函数

时间:2017-09-08 06:12:27

标签: jquery fullpage.js

我有4个部分,使用fullPage js构建,第3部分依次有4个幻灯片。即使是垂直滚动,我在幻灯片上使用水平导航,因此我的导航结果如图所示 enter image description here

如果在幻灯片部分点击我的菜单上的链接,我想向左移动到第一张幻灯片,然后根据点击的部分链接向上或向下移动。

我知道moveTo()可用于移动到任何部分或幻灯片,所以我连续两次使用它。我不能让它正常工作。

onLeave选项的代码用于水平滚动,而afterSlideLoad的代码用于左移动转到第一张幻灯片然后向上或向下。

任何人都有任何想法?

链接到网站:https://rimildeyjsr.github.io/spotify-circle-animation

HTML(菜单):

<ul id="menu">
    <li class="menu-link" data-menuanchor="home"><a href="#home">Home</a></li>
    <li class="menu-link" data-menuanchor="about"><a href="#about">About</a></li>
    <li class="menu-link" data-menuanchor="projects"><a href="#projects">Projects</a></li>
    <li class="menu-link" data-menuanchor="contact"><a href="#contact">Contact</a></li>
</ul>

jQuery的:

var slideIndex = 1, sliding = false, slideLinkClick = false, link;

$('#fullpage').fullpage({

                    anchors: ['home','about','projects','contact'],

                    loopHorizontal: false,

                    fixedElements: '#toggle,#overlay',

                    slidesNavigation: true,

                    menu: '#menu',

                    controlArrows: false,

                    slidesNavPosition: 'bottom',

                    recordHistory: false,

                    onLeave: function(index, nextIndex, direction) {

                        if (index == 3 && !sliding) {

                            if (direction == 'down' && slideIndex < 4) {

                                sliding = true;
                                $.fn.fullpage.moveSlideRight();
                                slideIndex++;
                                return false;

                            } else if (direction == 'up' && slideIndex > 1) {

                                sliding = true;
                                $.fn.fullpage.moveSlideLeft();
                                slideIndex--;
                                return false;

                            }

                        } else if (sliding) {

                            return false;

                        }

                    },
                    afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
                        sliding = false;

                        $('.menu-link').on('click', function(){
                            link = $(this).attr('data-menuanchor');
                            link= "'"+link+"'";
                            console.log(link);
                            $.fn.fullpage.moveTo('projects',0);
                            slideLinkClick = true;
                        });

                        if(index === 3 && slideIndex === 0 && slideLinkClick === true) {
                            console.log(link);
                            $.fn.fullpage.moveTo(link);
                            slideLinkClick = false;
                            console.log(slideLinkClick);
                        }
                    }
                });

0 个答案:

没有答案