页面切换插件 pageSwitch v1.2
简介
纯javascript实现的全屏滚动插件,可水平/垂直全屏滚动页面
支持导出为jQuery插件,CMD模块,AMD模块,全局变量
模式
两种滑动模式 -- horizontal(水平)、vertical(垂直)
默认属性
options = {
"container" : "container", // 容器,默认为#container
"pages" : "section", // 子容器,默认为.page
"easing" : "ease", // 特效方式,ease-in,ease-out,linear
"duration" : 1000, // 每次动画执行的时间
"pagination" : true, // 是否显示分页
"loop" : false, // 是否循环
"keyboard" : true, // 是否支持键盘
"direction" : "vertical", // 滑动的方向,horizontal(水平), vertical(垂直),默认垂直
"pageSwitchComplete" : function(pageIndex) { // 切换完成的回调函数,参数为当前页的序号
console.log("切换完成,当前页的序号为:" + pageIndex);
}
};使用
引入
// common.min.js是自己维护的一个js库,汇集了开发时常用的方法
// github: https://github.com/laixiangran/commonJS
<script src="http://www.laixiangran.cn/CDN/common.min.js"></script>
<script src="../dist/js/pageSwitch.min.js"></script>添加容器
<div id="container">
<div class="section" id="section0">
<p>This is page1</p>
</div>
<div class="section" id="section1">
<p>This is page2</p>
</div>
<div class="section" id="section2">
<p>This is page3</p>
</div>
<div class="section" id="section3">
<p>This is page4</p>
</div>
</div>初始化
new pageSwitch(options);