兼容性
使用方法
1、引入文件
<link rel="stylesheet" href="css/jquery.fullPage.css">
<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 页 |
转载请注明:前端录»滚动插件fullPage.js
<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=22-337-2"></script>