<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fullpage_test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css">
<style >
body {
text-align: center;
font-size: 12px;
color: white;
}
/*.section1 {
background-color: orange;
text-align: center;
}
.section2 {
background-color: red;
text-align: center;
}
.section3 {
background-color: green;
text-align: center;
}
.section4 {
background-color: gray;
text-align: center;
}
.section5 {
background-color: black;
text-align: center;
}
.slide{
background-color:pink;}*/
#header {
font-size: 50px;
position: fixed;
top: 0;
right: 50px;
}
#fullpageMenu{
font-size:20px;
position:fixed;
top:50px;
z-index:999;
list-style-type:none;
}
#fullpageMenu a{
text-align:left;
text-decoration:none;}
#fullpageMenu a:hover{
color:#FFF;
}
</style>
</head>
<body>
<div id="header">header</div>
<ul id="fullpageMenu">
<li data-menuanchor="page1" class="active"><a href="#page1">page1</a></li>
<li data-menuanchor="page2"><a href="#page2">page2</a></li>
<li data-menuanchor="page3"><a href="#page3">page3</a></li>
<li data-menuanchor="page4"><a href="#page4">page4</a></li>
<li data-menuanchor="page5"><a href="#page5">page5</a></li>
</ul>
<div id="fullpage">
<div class="section ">
<h1> first page</h1>
</div>
<div class="section section2">
<div class="slide slide1">slide1</div>
<div class="slide">slide1</div>
<div class="slide">slide1</div>
<div class="slide">slide1</div>
<div class="slide">slide1</div>
</div>
<div class="section section3">
<h1>third page</h1>
</div>
<div class="section section4">
<h1> forth page</h1>
</div>
<div class="section section5">
<h1> fifth page</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js">
</script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['red','blue','yellow','pink','black'],
//resize:false,
//scrollingSpeed:2000, //滚动时间，2000就是两秒
anchors:['page1','page2','page3','page4','page5'],/*设置锚链接 主要是在收藏某一页的时候，当再次打开的时候，它不会由第一页滑到这一页，而是直接出现这一页*/
// lockAnchors:true,/*锁定锚节点*/
//loopTop:true, /* 顶部循环滚动是跳往底部的页面*/
/* loopBottom:true, 底部循环滚动，同样是跳往页面
loopHorizontal:false, 幻灯片循环滚动
*/
//autoscrolling：true, /*页面不会按照插件的滚动方式滚动，而是按照滚动条的滚动方式滚动*/
//scrollBar:true, /*此设置项为true，则会出现滚动条但还是按照插件的滚动方式*/
fixedElements:'#header', //设置某一元素固定于某一位置，通过JQuary捕捉定位到某一元素（如这个实例中的header）
//continuousVertical:true, /*循环滚动，与loopTop和loopBottom不兼容，不能同时设置，经测试如果同时设置则会有looopTop或者loopBottom的效果*/
//menu:'#fullpageMenu', //为菜单选项，在前面的ul中要把锚链接相应的链接起来。
});
});
</script>
</body>
</html>
