<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="description" content="通过class做选择器的!">
<title>fullpage 的简单页面</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.css">
<style>
body{
color: #ffffff;
text-align: center;
font-size: 24px;
}
.section1{
background-color: antiquewhite;
}
.section2{
background-color:gold;
}
.section3{
background-color: yellowgreen;
}
.section4{
background-color: lightseagreen;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section section1"><h1>这是第一屏</h1></div>
<div class="section section2">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
<div class="section section3"><h1>这是第三屏</h1></div>
<div class="section section4"><h1>这是第四屏</h1></div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.easings.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.slimscroll.min.js" charset="utf-8"></script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
slideSelector:'.slide',
paddingTop:0,
loopTop:true,
loopBottom:true
});
});
</script>
</html>
