1、引入jquery.js、pagePiling.js、jquery.pagepiling.css文件
[cc lang="html" escaped="true"]<link rel="stylesheet" href="css/jquery.pagepiling.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.pagepiling.min.js"></script>[/cc]
2、HTML代码如下给几个section类的div
[cc lang="html" escaped="true"]<div id="pagepiling">
<div class="section"><h3>第一屏</h3></div>
<div class="section"><h3>第二屏</h3></div>
<div class="section"><h3>第三屏</h3></div>
<div class="section"><h3>第四屏</h3></div>
</div>[/cc]
3、$('#pagepiling')调用pagepiling()方法
[cc lang="javascript" escaped="true"]$(function(){
$('#pagepiling').pagepiling();
});[/cc]
//pagePiling所有参数的应用实例
[cc lang="javascript" escaped="true"]$(document).ready(function() {
$('#pagepiling').pagepiling({
menu: null,
direction: 'vertical',
verticalCentered: true,
sectionsColor: [],
anchors: [],
scrollingSpeed: 700,
easing: 'swing',
loopBottom: false,
loopTop: false,
css3: true,
navigation: {
'textColor': '#000',
'bulletsColor': '#000',
'position': 'right',
'tooltips': ['section1', 'section2', 'section3', 'section4']
},
normalScrollElements: null,
normalScrollElementTouchThreshold: 5,
touchSensitivity: 5,
keyboardScrolling: true,
sectionSelector: '.section',
animateAnchor: false,
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
});
});[/cc]