GitHunt
LA

laixiangran/pageSwitch

pageSwitch - 纯javascript实现的全屏滚动插件

页面切换插件 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);

Languages

JavaScript71.4%CSS19.5%HTML9.2%

Contributors

Created April 2, 2016
Updated August 22, 2023