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>

非常感谢，

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

<强>更新

按顺序正确包括：

样式;
jQuery的;
jQuery Migrate （我认为你不需要它）;
jQuery FullPage和其他jQuery 插件;
你编码。

它看起来应该是这样的

<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

替换你jS：）

＆＃13;

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

＆＃13;

如何使fullPage.js插件工作？

1 个答案: