jQuery全屏插件fullPage的基本使用

如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
兼容性
fullpage兼容jquery1.7+
使用方式
第一步 ：引入文件

 <link rel="stylesheet" href="css/jquery.fullpage.css">
 <script src="js/jquery.min.js"></script>
<script src="js/jquery.fullpage.js"></script>

第二步：在HTML上写入：

div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
    <div class="section">第四屏</div>
    <div class="section">第五屏</div>
    <div class="section">第六屏</div>
    <div class="section">第七屏</div>
    <div class="section">第八屏</div>
</div>

第四步：JS调用代码

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

效果就出来了
配置


方法

回调函数