// 如果使用webpack或者requirejs或者browserify等构建工具，可以这样：
var pageSwitch = require('pageswitch');

// 也可以直接在下载本文件，直接在页面中引入
// 首先在页面中引入pageSwitch.js
// 调用 pageSwitch 方法

var pw = new pageSwitch('container id', {
    duration: 600, //int 页面过渡时间
    direction: 1, //int 页面切换方向，0横向，1纵向
    start: 0, //int 默认显示页面
    loop: false, //bool 是否循环切换
    ease: 'ease', //string|function 过渡曲线动画，详见下方说明
    transition: 'slide', //string|function转场方式，详见下方说明
    freeze: false, //bool 是否冻结页面（冻结后不可响应用户操作，可以通过 `.freeze(false)` 方法来解冻）
    mouse: true, //bool 是否启用鼠标拖拽
    mousewheel: false, //bool 是否启用鼠标滚轮切换
    arrowkey: false, //bool 是否启用键盘方向切换
    autoplay: false, //bool 是否自动播放幻灯 新增
    interval: int //bool 幻灯播放时间间隔 新增
});

//调用方法
pw.prev(); //上一张
pw.next(); //下一张
pw.slide(n); //第n张
pw.setEase(); //重新设定过渡曲线
pw.setTransition(); //重新设定转场方式
pw.freeze(true | false); //冻结页面转换，冻结后不可响应用户操作（调用slide prev next方法还可以进行）

pw.play(); //播放幻灯
pw.pause(); //暂停幻灯

/* 2015.03.22 新增方法 */
pw.prepend(DOM_NODE); //前增页面
pw.append(DOM_NODE); //后增页面
pw.insertBefore(DOM_NODE, index); //在index前添加
pw.insertAfter(DOM_NODE, index); //在index后添加
pw.remove(index); //删除第index页面
pw.isStatic(); //是否静止状态

pw.destroy(); //销毁pageSwitch效果对象

/* 事件绑定
 * event可选值:
 *
 * before 页面切换前
 * after 页面切换后
 * update 页面切换中
 * dragStart 开始拖拽
 * dragMove 拖拽中
 * dragEnd 结束拖拽
 */
pw.on(event, callback);

//注：此处传值也可直接在new pageSwitch对象时经ease参数传入
//设置匀速linear过渡示例：
pw.setEase('linear'); //由于内置了linear支持，所以可以直接使用

//假如没有内置linear，则使用自定义过渡曲线函数如下
pw.setEase(function(t, b, c, d) {
    return (c * t) / d + b;
});

//注：此处传值也可直接在new pageSwitch对象时经transition参数传入
//设置fade效果示例：
pw.setTransition('fade'); //由于内置了fade效果，所以可以直接调用。

//假定没有内置fade，自定义转场函数如下
pw.setTransition(function(cpage, cp, tpage, tp) {
    /* 过渡效果处理函数
     * @param HTMLElement cpage 参与动画的前序页面
     * @param Float cp 目标页面过渡比率，取值范围-1到1
     * @param HTMLElement tpage 参与动画的后序页面；如果非循环loop模式，则在切换到边缘页面时可能不存在该参数
     * @param Float tp 目标页面过渡比率，取值范围-1到1；如果非循环loop模式，则在切换到边缘页面时可能不存在该参数
     */

    if ('opacity' in cpage.style) {
        cpage.style.opacity = 1 - Math.abs(cp);
        if (tpage) {
            tpage.style.opacity = Math.abs(cp);
        }
    } else {
        cpage.style.filter = 'alpha(opacity=' + (1 - Math.abs(cp)) * 100 + ')';
        if (tpage) {
            tpage.style.filter = 'alpha(opacity=' + Math.abs(cp) * 100 + ')';
        }
    }
});

//如果你有jQuery类似组件，可以更简单
pw.setTransition(function(cpage, cp, tpage, tp) {
    $(cpage).css('opacity', 1 - Math.abs(cp));
    $(tpage).css('opacity', Math.abs(cp));
});

$.fn.extend({
    pageSwitch: function(cfg) {
        this[0].ps = new pageSwitch(this[0], cfg);
        return this;
    },
    ps: function() {
        return this[0].ps;
    }
});

//使用
$(container_id).pageSwitch({
    duration: 1000,
    transition: 'slide'
});

$(container_id)
    .ps()
    .next(); //由于链式调用返回依然是jq对象自身，所以如果需要使用pageSwitch对象方法，需要通过 `.ps()` 方法获取对pageSwitch对象的引用。