在 Codepen 项目中使用 fullpage.js 时遇到问题

Question

我是编码新手，我已经掌握了基本的 CSS 和 HTML 技能，但是我无法将 fullpage.js 集成到我的 codepen 项目中（https://codepen.io/Selky/project/editor/DYrVYr )- 即使上传作者 (Alvaro Trigo) 使用的确切演示文件，我仍然遇到问题。这些是演示调用的脚本：

<script type="text/javascript" src="jquery.fullPage.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
            anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
            menu: '#menu',
            scrollingSpeed: 1000
        });
    });
</script>

对于为什么这对我不起作用的任何见解，我将不胜感激。我查看了其他 codepen 文件（例如 https://codepen.io/alvarotrigo/pen/NxyPPp），它们似乎甚至不需要

之外的任何东西

$('#fullpage').fullpage({ sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], });

正常运行-但我不明白为什么或者我是否能够在项目环境中做同样的事情。

编辑：我正在添加演示代码的整个当前头部部分，但我无法使其发挥作用：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>fullPage.js One Page Scroll Sites</title>
    <meta name="author" content="Alvaro Trigo Lopez" />
    <meta name="description" content="fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll like iPhone website." />
    <meta name="keywords"  content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple" />
    <meta name="Resource-type" content="Document" />


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


    <style>
        /* Sections
         * --------------------------------------- */
        #section0 img,
        #section1 img{
            margin: 20px 0 0 0;
        }
        #section2 img{
            margin: 20px 0 0 52px;
        }
        #section3 img{
            bottom: 0px;
            position: absolute;
            margin-left: -420px;
        }
        .intro p{
            width: 50%;
            margin: 0 auto;
            font-size: 1.5em;
        }
        .twitter-share-button{
            position: absolute;
            z-index: 99;
            right: 149px;
            top: 9px;
        }
    </style>
    <!--[if IE]>
        <script type="text/javascript">
             var console = { log: function() {} };
        </script>
    <![endif]-->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

    <script type="text/javascript" src="jquery.fullPage.js"></script>
    <script type="text/javascript" src="examples.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
                anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
                menu: '#menu',
                scrollingSpeed: 1000
            });
        });
    </script>

</head>

我的文件夹结构：imgur.com/a/f7KhI3M

经过一些小改动后，这是当前的 head 代码（仍然不起作用）：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>fullPage.js One Page Scroll Sites</title>
    <meta name="author" content="Alvaro Trigo Lopez" />
    <meta name="description" content="fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll like iPhone website." />
    <meta name="keywords"  content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple" />
    <meta name="Resource-type" content="Document" />


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


    <style>
        /* Sections
         * --------------------------------------- */
        #section0 img,
        #section1 img{
            margin: 20px 0 0 0;
        }
        #section2 img{
            margin: 20px 0 0 52px;
        }
        #section3 img{
            bottom: 0px;
            position: absolute;
            margin-left: -420px;
        }
        .intro p{
            width: 50%;
            margin: 0 auto;
            font-size: 1.5em;
        }
        .twitter-share-button{
            position: absolute;
            z-index: 99;
            right: 149px;
            top: 9px;
        }
    </style>
    <!--[if IE]>
        <script type="text/javascript">
             var console = { log: function() {} };
        </script>
    <![endif]-->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

    <script type="text/javascript" src="jquery.fullpage.js"></script>
    <script type="text/javascript" src="examples.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
                anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
                menu: '#menu',
                scrollingSpeed: 1000
            });
        });
    </script>

</head>

感谢大家的帮助，我得到了正确的 header 内容（我修复了一些文件路径并切换到使用 HTTPS 库而不是 HTTP）：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>fullPage.js One Page Scroll Sites</title>
    <meta name="author" content="Alvaro Trigo Lopez" />
    <meta name="description" content="fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll like iPhone website." />
    <meta name="keywords"  content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple" />
    <meta name="Resource-type" content="Document" />


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


    <style>
        /* Sections
         * --------------------------------------- */
        #section0 img,
        #section1 img{
            margin: 20px 0 0 0;
        }
        #section2 img{
            margin: 20px 0 0 52px;
        }
        #section3 img{
            bottom: 0px;
            position: absolute;
            margin-left: -420px;
        }
        .intro p{
            width: 50%;
            margin: 0 auto;
            font-size: 1.5em;
        }
        .twitter-share-button{
            position: absolute;
            z-index: 99;
            right: 149px;
            top: 9px;
        }
    </style>
    <!--[if IE]>
        <script type="text/javascript">
             var console = { log: function() {} };
        </script>
    <![endif]-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

    <script type="text/javascript" src="jquery.fullpage.js"></script>
    <script type="text/javascript" src="examples.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
                anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
                menu: '#menu',
                scrollingSpeed: 1000
            });
        });
    </script>

</head>

Answer 1

您链接的文件有误<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />

应该是<link rel="stylesheet" type="text/css" href="jquery.fullpage.css" />

Answer 2

问题是您在 HTML 中使用 fullPage.js，但您的文件名是 jquery.fullpage.js。请记住，路径区分大小写。

fullpage/jquery.fullpage.extensions.min.js

也是不正确的，因为您没有整页文件夹

jquery.fullpage.extensions.min.js

应该是正确的，

在 Codepen 项目中使用 fullpage.js 时遇到问题

Trouble using fullpage.js in Codepen Project

html

javascript

css

fullpage.js

codepen