确保 .js 文件中的所有先决条件组件 // 示例页面故障
ensure all prerequisite components in .js file // example page malfunction
我试图只设置基本的 index.html 页面，但它似乎完全损坏了。
我找不到任何人有类似问题的问题。
该页面看起来好像只是格式不正确 HTML。
也许我必须包含一些额外的库？ Link 有什么不同的方式吗？在 this question Alvaro 中，createur，他自己似乎也这么说了，但没有具体说明是怎么说的。
至此我直接复制了this video but it was completely not working, then I switched and implemeted the demo page的例子，还是没有任何改进。
参见 my site 也许这可能是问题的一些迹象。
我是否需要安装任何先决条件才能使此文件在 this way 中工作：
<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>
<body>
<select id="demosMenu">
<option selected>Choose Demo</option>
<option id="backgrounds">Background images</option>
<option id="backgroundVideo">Background video</option>
<option id="gradientBackgrounds">Gradient backgrounds</option>
<option id="backgroundsFixed">Fixed fullscreen backgrounds</option>
<option id="looping">Looping</option>
<option id="noAnchor">No anchor links</option>
<option id="scrollingSpeed">Scrolling speed</option>
<option id="easing">Easing</option>
<option id="callbacks">Callbacks</option>
<option id="css3">CSS3</option>
<option id="continuous">Continuous scrolling</option>
<option id="normalScroll">Normal scrolling</option>
<option id="scrollBar">Scroll bar enabled</option>
<option id="scrolling">Scroll inside sections and slides</option>
<option id="navigationV">Vertical navigation dots</option>
<option id="navigationH">Horizontal navigation dots</option>
<option id="fixedHeaders">Fixed headers</option>
<option id="apple">Apple iPhone demo (animations)</option>
<option id="oneSection">One single section</option>
<option id="responsive">Responsive</option>
<option id="methods">Methods</option>
</select>
<ul id="menu">
<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>
<div id="fullpage">
<div class="section " id="section0">
<h1>fullPage.js</h1>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
<img src="imgs/fullPage.png" alt="fullPage" />
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<h1>Create Sliders</h1>
<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
<img src="imgs/slider.png" alt="slider" />
</div>
</div>
<div class="slide">
<div class="intro">
<img src="imgs/1.png" alt="simple" />
<h1>Simple</h1>
<p>Easy to use. Configurable and customizable.</p>
</div>
</div>
<div class="slide">
<div class="intro">
<img src="imgs/2.png" alt="Cool" />
<h1>Cool</h1>
<p>It just looks cool. Impress everybody with a simple and modern web design!</p>
</div>
</div>
<div class="slide">
<div class="intro">
<img src="imgs/3.png" alt="Compatible" />
<h1>Compatible</h1>
<p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Example</h1>
<p>HTML markup example to define 4 sections.</p>
<img src="imgs/example2.png" alt="example" />
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Working On Tablets</h1>
<p>
Designed to fit to different screen sizes as well as tablet and mobile devices.
<br /><br /><br /><br /><br /><br />
</p>
</div>
<img src="imgs/tablets.png" alt="tablets" />
</div>
</div>
</body>
</html>
查看浏览器中的 JavaScript 控制台，您会发现脚本加载失败。所以要么是你忘记上传了，要么是你脚本标签中的路径有误：
在您网站的索引页中，您有指向 javascript 文件的链接，例如
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
您引用的这些文件都不在指定的位置，即浏览器找不到要下载的文件。
如果文件应该在目录 "vendor" 中，那么 index.html 文件目录下应该有一个 "vendor" 目录。 jquery.fullPage.js 文件应与 index.html 文件位于同一目录中。
上面说了，尽量把你所有的 js 文件放在一个目录中，否则会很混乱。
我试图只设置基本的 index.html 页面，但它似乎完全损坏了。
我找不到任何人有类似问题的问题。
该页面看起来好像只是格式不正确 HTML。
也许我必须包含一些额外的库？ Link 有什么不同的方式吗？在 this question Alvaro 中，createur，他自己似乎也这么说了，但没有具体说明是怎么说的。
至此我直接复制了this video but it was completely not working, then I switched and implemeted the demo page的例子，还是没有任何改进。
参见 my site 也许这可能是问题的一些迹象。
我是否需要安装任何先决条件才能使此文件在 this way 中工作：
<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>
<body>
<select id="demosMenu">
<option selected>Choose Demo</option>
<option id="backgrounds">Background images</option>
<option id="backgroundVideo">Background video</option>
<option id="gradientBackgrounds">Gradient backgrounds</option>
<option id="backgroundsFixed">Fixed fullscreen backgrounds</option>
<option id="looping">Looping</option>
<option id="noAnchor">No anchor links</option>
<option id="scrollingSpeed">Scrolling speed</option>
<option id="easing">Easing</option>
<option id="callbacks">Callbacks</option>
<option id="css3">CSS3</option>
<option id="continuous">Continuous scrolling</option>
<option id="normalScroll">Normal scrolling</option>
<option id="scrollBar">Scroll bar enabled</option>
<option id="scrolling">Scroll inside sections and slides</option>
<option id="navigationV">Vertical navigation dots</option>
<option id="navigationH">Horizontal navigation dots</option>
<option id="fixedHeaders">Fixed headers</option>
<option id="apple">Apple iPhone demo (animations)</option>
<option id="oneSection">One single section</option>
<option id="responsive">Responsive</option>
<option id="methods">Methods</option>
</select>
<ul id="menu">
<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>
<div id="fullpage">
<div class="section " id="section0">
<h1>fullPage.js</h1>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
<img src="imgs/fullPage.png" alt="fullPage" />
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<h1>Create Sliders</h1>
<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
<img src="imgs/slider.png" alt="slider" />
</div>
</div>
<div class="slide">
<div class="intro">
<img src="imgs/1.png" alt="simple" />
<h1>Simple</h1>
<p>Easy to use. Configurable and customizable.</p>
</div>
</div>
<div class="slide">
<div class="intro">
<img src="imgs/2.png" alt="Cool" />
<h1>Cool</h1>
<p>It just looks cool. Impress everybody with a simple and modern web design!</p>
</div>
</div>
<div class="slide">
<div class="intro">
<img src="imgs/3.png" alt="Compatible" />
<h1>Compatible</h1>
<p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Example</h1>
<p>HTML markup example to define 4 sections.</p>
<img src="imgs/example2.png" alt="example" />
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Working On Tablets</h1>
<p>
Designed to fit to different screen sizes as well as tablet and mobile devices.
<br /><br /><br /><br /><br /><br />
</p>
</div>
<img src="imgs/tablets.png" alt="tablets" />
</div>
</div>
</body>
</html>
查看浏览器中的 JavaScript 控制台，您会发现脚本加载失败。所以要么是你忘记上传了，要么是你脚本标签中的路径有误：
在您网站的索引页中，您有指向 javascript 文件的链接，例如
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
您引用的这些文件都不在指定的位置，即浏览器找不到要下载的文件。
如果文件应该在目录 "vendor" 中，那么 index.html 文件目录下应该有一个 "vendor" 目录。 jquery.fullPage.js 文件应与 index.html 文件位于同一目录中。
上面说了，尽量把你所有的 js 文件放在一个目录中，否则会很混乱。