使用方法
1、引入文件
<script src="js/fullPage.min.js"></script>
2、HTML
<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 class="page page3"> <div class="contain"> <p class="txt">第三屏</p> </div> </div> <div class="page page4"> <div class="contain"> <p class="txt">第四屏</p> </div> </div> <div class="page page5"> <div class="contain"> <p class="txt">第五屏</p> </div> </div> </div> <ul id="navBar"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
3、JavaScript
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 页 |