fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动、CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备。
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>
<ul id="navBar">
<li>1</li>
<li>2</li>
.......
</ul>
引入fullpage组件,不需要jQuery库
<script src="fullPage.min.js"></script>
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 页 | - |
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791