[JS插件] pageSwitch 适合移动端整屏滚动效果的使用教程

pageSwitch 是一款可以整屏滚动的js插件，可以设置多种切换效果，手机上也能很好的实现。
代码出处：https://github.com/qiqiboy/pageSwitch

使用说明

一、下载代码

　　在 https://github.com/qiqiboy/pageSwitch 下载源代码。

---

二、构建网页，引入相关文件

　　1、新建html页面，如果是移动端看的话，需要在页面头部插入视口说明：

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

　　2、引入 jquery.js 库文件，引入 pageSwitch.js 文件。

---

三、写出你要分几屏的html结构，并配上样式

　　1、在页面里写出你要分几屏的html代码，并把他们都套在一个层内，假设你要分2屏，如下：

    <div id="pages">
        <div class="page page1 current">
            <h1>第一页</h1>
            <div class="box">
                <p>可以用用鼠标或者手指拖动页面，亦可使用鼠标滚轮、键盘方向键等</p>
            </div>
        </div>

        <div class="page page2">
            <h1>第二页</h1>
            <div class="box">
                <p>不久前，针对微博用户@Mor-小某的“锤子手机还是不错的！试用后感觉很不错！就是3000多买个它感觉贵了！定价2600的话还能接受！”这句话，罗永浩在微博上表示“明白，我们考虑一下”。但就在大家还没回过神来的时候锤子科技已经迅速宣布了降价，其中16GB 3G版的售价直接下调到了1980元，32G/64G也分别调整到了2080/2480元。</p>
            </div>
        </div>

    </div>

　　2、为这个结构配上必须的样式，如下：

#pages  { position: relative; overflow: hidden; width: 100%; max-width: 768px; height: 100%; margin: 0 auto;}
.page  { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

---

四、写入JavaScript启动代码

　　你可以直接复制官网上的启动代码，也可以修改后使用，这里给出修改过后，使当前层的class加上current的样例：

    <script>
    window.onload=function () {
        var pw=new pageSwitch('pages',{
            duration:800,               //int 页面过渡时间
            direction:1,                //int 页面切换方向，0横向，1纵向
            start:0,                    //int 默认显示页面
            loop:false,                 //bool 是否循环切换
            ease:'ease',                //string|function 过渡曲线动画，详见下方说明
            transition:'slide',         //string|function转场方式，详见下方说明
            freeze:false,               //bool 是否冻结页面
            mouse:true,                 //bool 是否启用鼠标拖拽
            mousewheel:true,            //bool 是否启用鼠标滚轮切换
            arrowkey:true,              //bool 是否启用键盘方向切换
            autoplay:false              //bool 是否自动播放幻灯 新增
        });

        //以下内容是回调函数，不是必须的
        pages=pw.pages; 
        pw.on('before',function(now,prev){//now是切换前当前页面索引
            $(pages[now]).removeClass('current');  
        }); 
        pw.on('after',function(now,prev){//now是切换后当前页面索引
            $(pages[now]).addClass('current');
        });
    });
    </script>