1、引用文件[html]viewplaincopyprint?在CODE上查看代码片派生到我的代码片<linkrel="stylesheet"href="css/jquery.fullPage.css"><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/jquery-ui.min.js"></script><scriptsrc="js/jquery.fullPage.js"></script>2、html部分[html]viewplaincopyprint?在CODE上查看代码片派生到我的代码片<divclass="section">第一屏</div><divclass="section">第二屏</div><divclass="section"><divclass="slide">第三屏的第一屏</div><divclass="slide">第三屏的第二屏</div><divclass="slide">第三屏的第三屏</div><divclass="slide">第三屏的第四屏</div></div><divclass="section">第四屏</div>3、使用方法[javascript]viewplaincopyprint?在CODE上查看代码片派生到我的代码片$(document).ready(function(){$.fn.fullpage({slidesColor:['#1bbc9b','#4BBFC3','#7BAABE','#f90'],anchors:['page1','page2','page3','page4']});});


4、详细options参数参数类型说明默认值verticalCentered字符串内容是否垂直居中trueresize布尔值字体是否随着窗口缩放而缩放falseslidesColor函数设置背景颜色，如：无anchors数组定义锚链接无scrollingSpeed整数滚动速度，单位为毫秒700easing字符串滚动动画方式easeInQuartmenu布尔值绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动falsenavigation布尔值是否显示项目导航falsenavigationPosition字符串项目导航的位置，可选left或rightrightnavigationColor字符串项目导航的颜色#000navigationTooltips数组项目导航的tip无slidesNavigation布尔值是否显示左右滑块的项目导航falseslidesNavPosition字符串左右滑块的项目导航的位置，可选top或bottombottomcontrolArrowColor字符串左右滑块的箭头的背景颜色#fffloopBottom布尔值滚动到最底部后是否滚回顶部falseloopTop布尔值滚动到最顶部后是否滚底部falseloopHorizontal布尔值左右滑块是否循环滑动trueautoScrolling布尔值是否使用插件的滚动方式，如果选择false，则会出现浏览器自带的滚动条truescrollOverflow布尔值内容超过满屏后是否显示滚动条falsecss3布尔值是否使用JavaScript或CSS3transforms滚动falsepaddingTop字符串与顶部的距离0paddingBottom字符串与底部距离0fixedElements字符串无normalScrollElements无afterLoad函数滚动到某一屏后的回调函数，接收anchorLink和index两个参数，anchorLink是锚链接的名称，index是序号，从1开始计算无onLeave函数滚动前的回调函数，接收index和direction两个参数，index是序号，从1开始计算，direction判断往上滚动还是往下滚动无afterRender函数页面结构生成后的回调函数，或者说页面初始化完成后的回调函数无afterSlideLoad函数滚动到某一水平滑块后的回调函数，与afterLoad类似，接收anchorLink、index、slideIndex、direction4个参数无onSlideLeave函数某一水平滑块滚动前的回调函数，与onLeave类似，接收anchorLink、index、slideIndex、direction4个参数

本文为H5EDU机构官方HTML5培训教程，主要介绍：fullPage教程--整屏滚动效果插件 fullpage详解