代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fullpage实例</title>
<link rel="stylesheet" href="CSS/fullpage.css">
<link rel="stylesheet" href="CSS/index.css">
</head>
<body>
<header>
<div class="logo"><img src="img/mi-logo.png" alt="">手机项目</div>
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">首页</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">外观</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">配置</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">型号</a></li>
<li data-menuanchor="fifthPage"><a href="#fifthPage">说明</a></li>
<li data-menuanchor="sixthPage"><a href="#sixthPage">立即购买</a></li>
</ul>
</header>
<div class="fullPage" id="fullPage">
<div class="section">
<h2 class="title"><span>小米手机</span> 让你的生活更精彩</h2>
<div class="phone"></div>
<div class="shandow">来啊，飘起来</div>
</div>
<div class="section">
<div class="title">全面屏 + 四曲面陶瓷<br/>手机中的艺术品</div>
<div class="intro">自小米MIX 发布以来，不仅先后斩获多项国际大奖，更被多家世界级博物馆收藏。<br/>如此全方位、多领域的高度认可，小米MIX 系列堪称手机中的艺术品。</div>
<div class="phone">
<p class="pointl">高清摄像</p>
<p class="point2">超薄机身</p>
<p class="point3">大屏显示</p>
</div>
</div>
<div class="section">33333</div>
<div class="section">44444</div>
<div class="section">55555</div>
<div class="section fp-auto-height">
<footer>
dfjiefheifehifehfe
</footer>
</div>
</div>
<script src="JS/jquery.js"></script>
<script src="JS/fullpage.js"></script>
<script>
$("#fullPage").fullpage({
licenseKey:"OPEN-SOURCE-GPLV3-LICENSE",
//文本是否垂直居中；
verticalCentered: false,
css3: true,
//滚动到某一屏后的回调函数
afterLoad: function (anchorLink, sec) {
//通过index值来设置某一屏
$(".section").removeClass("current");
setTimeout(function () {
$(".section").eq(sec.index).addClass("current");
},200)
},
//右侧导航
navigation: true,
navigationPosition:"right",
navigationTooltips:["首页","外观","配置","型号","说明"],
menu: true,
anchors: ["firstPage","secondPage","thirdPage","fourthPage","fifthPage"]
});
//通过JS来操作顶部导航覆盖内容的问题
for(var i=0; i<5; i++){
$(".section").eq(i).css({
paddingTop: "100px"
})
}
</script>
</body>
</html>
/*重置样式*/
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
font-size: 14px;
}
a{
text-decoration: none;
color: #333333;
}
/*重置样式end*/
header{
width: 100%;
height: 80px;
line-height: 80px;
position: fixed;
left: 0;
top: 0;
z-index: 99;
background-color: lavender;
}
.section:nth-child(1){
background-color: lightslategrey;
position: relative;
}
.section:nth-child(2){
background-color: #f7f7f7;
position: relative;
}
.section:nth-child(3){
background: url("../img/index3.jpg") no-repeat;
background-size: cover;
}
.section:nth-child(4){
background: url("../img/1.jpg") no-repeat;
background-size: cover;
}
.section:nth-child(5){
background: url("../img/2.jpg") no-repeat;
background-size: cover;
}
.section:nth-child(6){
}
/*底部设置*/
.section:nth-child(6) footer{
background-color: pink;
height: 300px;
}
