如何使 fullPage.js 插件工作？

Question

I'm so newbie in javascript !我是 javascript 新手！ I need your help, guys (pretty please).我需要你的帮助，伙计们（非常请）。

I need to initialize fullPage.js plugin into my webpage, but I don't know what is missing.我需要在我的网页中初始化 fullPage.js 插件，但我不知道缺少什么。 I've read the tutorial for this but I'm doing something wrong and I don't know what.我已经阅读了这个教程，但我做错了什么，我不知道是什么。

This is my html code:这是我的 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>

Many thanks,非常感谢，

Sandra P.桑德拉·P。

Answer 1

I thinkthis can help you.我认为这可以帮助你。

And I recommend to try to replace it:我建议尝试更换它：

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

to this对此

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

This should correct the error TypeError:. $(...).Fullpage这应该更正错误TypeError:. $(...).Fullpage TypeError:. $(...).Fullpage . TypeError:. $(...).Fullpage . Just look at the live example .看看活生生的例子。

I changed your example and it works, see this .我改变了你的例子，它有效，见这个。

Update更新

Properly include in that order:按该顺序正确包括：

Styles;样式；
jQuery; jQuery;
jQuery Migrate (I think you do not need it) ; jQuery Migrate （我认为你不需要它） ；
jQuery FullPage and other jQuery plugins; jQuery FullPage 和其他 jQuery 插件；
you code.你编码。

it should look like this它应该是这样的

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

Update 2更新 2

Replace youJS :)替换你JS :)

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

如何使 fullPage.js 插件工作？

问题描述

1 个解决方案

解决方案1
2 2016-09-14 09:28:32

如何使 fullPage.js 插件工作？

问题描述

1 个解决方案

解决方案1 2 2016-09-14 09:28:32

解决方案1
2 2016-09-14 09:28:32