无法滑动？

.my-slider-container {touch-action:pan-y;//横向滚动时 ortouch-action:pan-x;//纵向滑动时}

查看效果

预览效果

安装

npm install pageswitch

如何使用

// 如果使用webpack或者requirejs或者browserify等构建工具，可以这样：varpageSwitch=require('pageswitch');// 也可以直接在下载本文件，直接在页面中引入// 首先在页面中引入pageSwitch.js// 调用 pageSwitch 方法varpw=newpageSwitch('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);

setEase 示例

//注：此处传值也可直接在new pageSwitch对象时经ease参数传入//设置匀速linear过渡示例：pw.setEase('linear');//由于内置了linear支持，所以可以直接使用//假如没有内置linear，则使用自定义过渡曲线函数如下pw.setEase(function(t,b,c,d){return(c*t)/d+b;});

setTransition 示例

//注：此处传值也可直接在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'incpage.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));});

jQuery/Zepto 适配器

$.fn.extend({pageSwitch:function(cfg){this[0].ps=newpageSwitch(this[0],cfg);returnthis;},ps:function(){returnthis[0].ps;}});//使用$(container_id).pageSwitch({duration:1000,transition:'slide'});$(container_id).ps().next();//由于链式调用返回依然是jq对象自身，所以如果需要使用pageSwitch对象方法，需要通过 `.ps()` 方法获取对pageSwitch对象的引用。

兼容性

DEMO