fullPage 是一款不依赖任何 js 库的全屏滚动组件，支持垂直/水平滚动、CSS3 旋转/缩放动画，支持 IE5.5+，支持移动设备。
在线实例
使用方法
- <div id="pageContain">
- <div class="page page1 current">
- <div class="contain">
- <p class="txt">第一屏</p>
- </div>
- </div>
- <div class="page page2">
- <div class="contain">
- <p class="txt">第二屏</p>
- </div>
- </div>
- ......
- </div>
- <ul id="navBar">
- <li>1</li>
- <li>2</li>
- .......
- </ul>
复制
- var runPage;
- runPage = new FullPage({
- id: 'pageContain',
- slideTime: 800,
- effect: {
- transform: {
- translate: 'Y'
- },
- opacity: [0, 1]
- },
- mode: 'wheel, touch, nav:navBar',
- easing: 'ease'
- });
复制
参数详解
| 参数 | 描述 | 默认值 |
| id | 外层包裹 id | - |
| slideTime | 每页切换时间，单位为毫秒 | 800 |
| effect | 切换效果 | - |
| mode | 转换模式 | - |
| callback | 滑动结束后的回调函数 | - |
| prev() | 向上滚动一页/一屏 | - |
| next() | 向下滚动一页/一屏 | - |
| thisPage() | 返回当前的页码 | - |
| go(num) | 滚动到第 num 页 | - |