Skip to content
pageSwitch - 纯javascript实现的全屏滚动插件
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
src
.gitignore
gulpfile.js
package.json
readme.md

readme.md

页面切换插件 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);
You can’t perform that action at this time.