fullpage.js滑块无法正常工作

时间:2015-04-17 05:15:27

标签: jquery slider fullpage.js

我有一个学校项目到期日,我遇到了问题。在我将ScrollBar设置为true后,我的fullpage.js水平滑块已停止工作。

如果我将它设置为false它可以工作,但我希望滚动条在那里。网站上滚动条的示例效果很好。

http://alvarotrigo.com/fullPage/examples/normalScroll.html

我不能为我的生活弄清楚为什么我的不再有效。我有一种感觉,我错过了一个命令,但我仍然是jQuery的初学者。

如果可以,请提供帮助:)

非常感谢。

我的网站地址是:http://cultureboard.noahalexfarr.com/#firstPage

以下是我的HTML

<!DOCTYPE html>
<html>
<head>
<title>Items of my Life</title>
    <meta charset="utf-8">

    <link rel='shortcut icon' href='favicon.ico' type='image/x-icon'> 


    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
    <script src="js/jquery.easings.min.js"></script>


    <!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
    <script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>

    <script type="text/javascript" src="js/jquery.fullPage.js"></script>

    <script src="http://use.edgefonts.net/arizonia:n4:all.js"></script> 

    <script>

        function parallax(){
            var prlx_lyr_1 = document.getElementById('prlx_lyr_1');
            var prlx_lyr_2 = document.getElementById('prlx_lyr_2');
            var prlx_lyr_3 = document.getElementById('prlx_lyr_3');
            var prlx_lyr_4 = document.getElementById('prlx_lyr_4');
            var prlx_lyr_5 = document.getElementById('prlx_lyr_5');
            var prlx_lyr_6 = document.getElementById('prlx_lyr_6');
            prlx_lyr_1.style.top = (window.pageYOffset / 3)+'px';
            prlx_lyr_2.style.top = -(window.pageYOffset / 4)+'px';
            prlx_lyr_3.style.top = (window.pageYOffset / 6)+'px';
            prlx_lyr_4.style.top = -(window.pageYOffset / 8)+'px';
            prlx_lyr_5.style.top = -(window.pageYOffset / 12)+'px';
            prlx_lyr_6.style.top = (window.pageYOffset / 3)+'px';
        }

        window.addEventListener("scroll", parallax, false);

    </script>

    <script>

            $(document).ready(function() {
    $('#fullpage').fullpage({
        sectionsColor: ['#1B2126', '#394D59', '#3E768C', '#41A8BF', '#9BEAF2'],
        css3: true,
        slidesNavigation: true,
        slidesNavPosition: 'bottom',
        scrollingSpeed: 2000,
        autoScrolling: true,
        fitToSection: true,
        scrollBar: true,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: false,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,
        controlArrows: true,
        verticalCentered: true,
        resize : false,
        paddingTop: '3em',
        paddingBottom: '10px',
        fixedElements: '#header, .footer',
        responsive: 0,
        navigation: true,
        anchors: ['firstPage', 'secondPage', 'thirdPage' , 'fourthPage' , 'fifthPage'],
        navigationPosition: 'right',
        navigationTooltips: ['First page', 'Second page', 'Third page' , 'Fourth page', 'Fifth page'],
        slidesNavigation: true,
        slidesNavPosition: 'bottom'

    });
});

    </script>

</head>

<body>


    <div id="fullpage">

        <div id="prlx_lyr_1"></div>
        <div id="prlx_lyr_2"></div>
        <div id="prlx_lyr_3"></div>
        <div id="prlx_lyr_4"></div>
        <div id="prlx_lyr_5"></div>
        <div id="prlx_lyr_6"></div>

        <div class="section" id="section0">

            <h1>Welcome to my world</h1>

            <h3>The story of the items that define me</h3>

        </div>

        <div class="section" id="section1">

            <h2>My goal</h2>

            <p>When I set out to create my culture board. I wanted to choose the items that best represented me as a whole.</p>

            <p>I choose objects that fell into 4 categories and arranged them accordingly:</p>

            <ul id="list">
                <li>Hobbies/Interests</li>
                <li>Snacks</li>
                <li>Work</li>
                <li>Soccer</li>
            </ul>

            <p>I played around with a number of different patterns before settling on my final arrangement. </p>

            <p>My creative process is labeled below:</p>

        </div>


            <div class="section" id="section2">

                <div class="slide" data-anchor="slide1"> 
                <h2>Overview</h2>
                    <img src="images/slide1.jpg" alt="set up">
                </div>

                <div class="slide" data-anchor="slide2">  
                <h2>An earlier configuration</h2>
                    <img src="images/slide2.jpg" alt="close up">
                </div>

                <div class="slide" data-anchor="slide3">  
                <h2>Coins from various countries</h2>
                    <img src="images/slide3.jpg" alt="coins">
                </div>

                <div class="slide" data-anchor="slide4">  
                <h2>Clearly I love Flippy Floppies</h2>
                    <img src="images/slide4.jpg" alt="feet">
                </div>

                <div class="slide" data-anchor="slide5">  
                <h2>Soccer helps me think</h2>
                    <img src="images/slide5.jpg" alt="soccer face">
                </div>

            </div>

        <div class="section" id="section3">
            <h2>The final step</h2>

            <p>After my culture board was complete I took it into Adobe After Effects to add motion.</p>

            <p>In addition I keyed out my Ipad screen and put a video of me crushing Dortmund as Arsenal!</p>
            <p>Finally, I recorded a voice over in audition to finish it off!</p>

            <img class="edit" src="images/final1.jpg" alt="feet">

        </div>

        <div class="section" id="section4">

            <h2>What it all adds up to</h2>

            <video poster="images/knolling.jpg" controls>

                <source src="videos/knollingvideo.mp4" type='video/mp4'/>
                <source src="videos/knollingvideo.webm" type='video/webm'/>

            </video>
        </div>
    </div>

</body>

</html> 

1 个答案:

答案 0 :(得分:2)

在示例的第三页上写道:

  

只需使用autoScrolling:false

我会尝试这个。