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>
    <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>

感谢大家的帮助，我已经找到了正确的标题内容（我修复了一些文件路径并切换到使用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

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

全页/ jquery.fullpage.extensions.min.js

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

jquery.fullpage.extensions.min.js

应该是正确的，

Answer 2

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

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

在Codepen Project

2 个答案: