如何使 fullPage.js 插件工作？

Question

我是 javascript 的新手！ 伙计们，我需要你们的帮助（拜托了）。

我需要在我的网页中初始化 fullPage.js 插件，但我不知道缺少什么。我已经阅读了这方面的教程，但我做错了什么，我不知道是什么。

这是我的html代码：

<head>
        <title>Title</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href='css/style.css' type='text/css' media='all' />
		<link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
        <link rel="shortcut icon" href='img/favicon.ico' type='image/x-icon'/ >
        <!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> <!-- fullPage.js plugin -->
        <script src="js/script.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="js/jquery.easings.min.js"></script> <!-- fullPage.js plugin -->
        <script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script> <!-- fullPage.js plugin -->
        <script type="text/javascript" src='js/jquery-migrate.min.js'></script>
        <script type="text/javascript">
			$(document).ready(function() {
				$('#fullpage').fullpage({
					anchors: ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
					scrollingSpeed: 1000
				});
			});
	</script>
</head>
<body>
	<div class="container-fluid" id="fullpage">
		<div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
        <div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
        <div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
        <div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
        <div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
        <div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- fullPage.js plugin -->
</body>

非常感谢，

桑德拉 P.

Answer 1

我觉得this可以帮到你。

我建议尝试替换它：

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> 
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script>

到这里

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" /> 
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

这应该更正错误TypeError:. $(...).Fullpage。 看直播example。

我更改了您的示例并且它有效，请参阅this。

更新

按顺序正确包含：

1. 样式；
2. jQuery;
3. jQuery Migrate （我觉得你不需要）;
4. jQuery FullPage 和其他 jQuery 插件；
5. 你编码。

应该是这样的

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<link rel="stylesheet" type="text/css" href="youCSS" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<!--other jQuery plugins-->

<script type="text/JavaScript" src="youJS"></script>

更新 2

替换youJS :)

<head>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
	$('#fullpage').fullpage({
		anchors : ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
		scrollingSpeed : 1000
	});
});

	</script>
</head>
<body>
	<div class="container-fluid" id="fullpage">
		<div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
        <div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
        <div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
        <div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
        <div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
        <div class="section">
			<div class="row first-section"> Some text.
            </div>
        </div>
    </div>

</body>