fullpage的使用

fullPage简介

fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便，很轻松的制作出全屏网站

主要功能：

支持鼠标滚动，多个回调函数，支持手机，平板触摸事件，支持css3动画，窗口缩放时自动调整，可设置滚动宽度，背景颜色，滚动速度，循环选项，毁掉，文本对齐方式等

引入基本文件
我引用的是Bootcdn的远程文件，你们也也可以把文件下载到本地来引用，这样可以更快些，这里要注意的是Juqery的引用一定要在jquery.fullpage上面，因为fullpage是建立在jquery基础上的。

<link href="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.js"></script>

编写HTML结构

<div id="fullpage">
<div class="section" id="section0">
<h1>这是第一屏</h1>
</div>
<div class="section" id="section1">
<h1>这是第二屏</h1>
</div>
<div class="section" id="section2">
<h1>这是第三屏</h1>
</div>
</div>

 

Js激活插件

<script>
$(function() {
$('#fullpage').fullpage();
});
</script>

到这里就已经ok了，一个全屏滚动的页面就做好了。