滚动滑屏成功的案例给大家做一个参考!
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meat name="viewport" content="widt=device-width, initial-scale=1,user-scalable=no/">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.3/jquery.fullpage.css"/>
<style type="text/css">
body{background: #fff;}
.section1{text-align: center; background-color: orange;}
.section2{text-align: center; background-color: green;}
.section3{text-align: center; background-color: gray;}
.section4{text-align: center; background-color: red;}
.slide{text-align: center;}
</style>
</head>
<body>
<div id="fullpage">
<div class="section section1"><h1>这个是第一屏</h1></div>
<div class="section section2">
<div class="slide">这个是第二屏的第一页</div>
<div class="slide">这个是第二屏的第二页</div>
<div class="slide">这个是第二屏的第三页</div>
<div class="slide">这个是第二屏的第四页</div>
</div>
<div class="section section3"><h1>这个是第三屏</h1></div>
<div class="section section4"><h1>这个是第四屏</h1></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage();
})
</script>
</body>
</html>