TouchSlider 实现（PC及移动端触摸界面）的幻灯slider效果

     TouchSlider是一个轻量级的javascript组件，设计的目的是提供一个可以方便实现全平台（PC及移动端触摸界面）的幻灯slider效果。近期开发触屏版网站的滑动选择菜单功能，对比了网上的一些jQuery Touchslider插件，发现还是qiqiboy那个版本的TouchSlider插件功能比较齐全。

MIT license的TouchSlider 0.95存在依赖 jQuery，需要额外加载 Javascript 脚本资源； 插件默认会将第二页的内容隐藏，如果想要平铺展示则需要修改 Javascript 脚本等缺点。

而qiqiboy版本的目前使用范围已经不仅仅限于幻灯片制作，更可以很方便的实现网站局部左右切换，通过提供的操作接口（.append(), .remove()），可以很方便的随时添加页面或者删除页面，实现在平台上的页面滑动。

以下仅以此版本的TouchSlider插件作为使用经验笔记。

TouchSlider

与 pageSwitch.js 的区别
pageSwitch.js适用场景为全屏切换，即一切一屏，并且在此基础上实现了超过一百种切换效果。而TouchSlider.js则侧重于在滑动效果下，不仅支持全屏切换，还支持不固定尺寸的幻灯切换。
具体使用请参看各组件所提供的示例。

Tips: v2版为重构版，提高了代码质量，也优化了性能。参数格式有所调整，如果是由旧版本更新，则注意修改调用的参数。

如何使用

// 首先在页面中引入touchslider.js// 调用 TouchSlider 方法var ts=new TouchSlider('container id',{    duration:600,           //int 页面过渡时间    direction:1,            //int 页面切换方向，0横向，1纵向    start:0,                //int 默认显示页面    align:'center',         //string 对齐方式，left(top) center(middle) right(bottom)    mouse:true,             //bool 是否启用鼠标拖拽    mousewheel:false,       //bool 是否启用鼠标滚轮切换    arrowkey:false,         //bool 是否启用键盘方向切换    fullsize:true,          //bool 是否全屏幻灯（false为自由尺寸幻灯）    autoplay:true,          //bool 是否自动播放幻灯    interval:int            //bool 幻灯播放时间间隔});//调用方法ts.prev();                  //上一张ts.next();                  //下一张ts.slide(n);                //第n张ts.play();                  //播放幻灯ts.pause();                 //暂停幻灯ts.prepend(DOM_NODE);       //前增页面ts.append(DOM_NODE);        //后增页面ts.insertBefore(DOM_NODE,index);    //在index前添加ts.insertAfter(DOM_NODE,index);     //在index后添加ts.remove(index);           //删除第index页面ts.isStatic();              //是否静止状态ts.destroy();               //销毁TouchSlider效果对象/* 事件绑定 * event可选值: *  * before 页面切换前 * after 页面切换后 * dragStart 开始拖拽 * dragMove 拖拽中 * dragEnd 结束拖拽 */ts.on(event,callback);

默认参数说明

_default: {    'id': 'slider', //string|elementNode 幻灯容器的id或者该节点对象    'begin': 0, //Number 默认从第几个幻灯开始播放，从0开始    'auto': true, //bool 是否自动播放    'speed':600, //Number 动画效果持续时间,单位是毫秒    'timeout':5000, //Number 幻灯播放间隔时间,单位毫秒    'direction':'left', //string left|right|up|down 播放方向,四个值可选    'align':'center', //string left|center|right 对齐方向（fixWidth=true情况下无效），靠左对齐（ipad版appStore上截图展现方式）、居中对齐（iphone版appStore上截图展现方式）、靠右对齐    'fixWidth':true, //bool 默认会将每个幻灯宽度强制固定为容器的宽度,即每次只能看到一张幻灯；false的情况参见下方第一个例子    'mouseWheel':false, //bool 是否支持鼠标滚轮    'before':new Function(), //Function 幻灯切换前, before(newIndex, oldSlide)    'after':new Function() //Function 幻灯切换后, after(newIndex, newSlide)}

一些常用接口方法

var slider=new TouchSlider(config);//config为配置参数，见上边说明slider.pause();//暂停播放slider.play();//开始播放slider.prev();//上一张slider.next();//下一张slider.stop();//停止播放（暂停并回到第一张）slider.append(newLi);//末尾添加一个幻灯项，参考下边第二个幻灯示例slider.prepend(newLi);//开头添加一个幻灯项slider.remove(index);//删除第index个幻灯，slider.remove(1)slider.insertBefore(newLi,index);//在第index幻灯前插入一个幻灯slider.slide(index, speed)://滑动到第index个幻灯项，速度为speed参数slider.resize();//重新设定slider的宽度高度等参数

demo地址

请点击http://u.boy.im/touchslider/

经验技巧

1. 插件存在一个小BUG。

由于源码内部绑定了窗口发生resize事件（浏览器窗口调整）时，插件也会跟resize重设参数以适应屏幕。但是出现需要幻灯容器隐藏和重新显示的时候，如果在隐藏期间窗口发生了resize事件，那么容器里面的幻灯项float样式就会全崩溃，因为隐藏期间幻灯项及容器的高度等参数都是错误的，slider执行的内部resize方法会导致样式错误，因此重新显示时，幻灯容器样式就崩了。

解决方式：在不重构插件源码的前提下，最简单的方法是在容器重新show之后，执行一下slider的resize方法，让幻灯容器参数重新恢复正常。

2. 禁用浏览器的左右滑动翻页功能

某些手机浏览器会占用左右滑动作为浏览器切换窗口功能，如UC浏览器，导致TouchSlider无法正常使用。

解决方法：可以在JS中禁用浏览器的左右滑动占用

    var control = navigator.control || {};
    if (control.gesture) {
        control.gesture(false);
    }

3. 网站局部菜单左右切换的右部滑动限制

用TouchSlider作为滑动菜单栏时，由于滑动并没有限制，可能出现菜单全滑到左边隐藏掉了，仅剩下最后一个菜单，右边完全空白的情况

解决方法：

a .到了最后一个菜单出现后禁止再向右滑动（需改源码）

b. 滑动结束后往回滚动至最适合位置。

以b方式为例，在slider的初始化配置中加上参数'after': doSlideAfter，使其每次滑动完都执行doSlideAfter：

    var itemWidth = document.getElementById("slider").firstChild.offsetWidth;
    var clientWidth = document.body.clientWidth;

    var lastLoacl = slider.length - parseInt(clientWidth / itemWidth);

    //每次窗口大小改变，滚动栏的最适合位置调整
    $(window).resize(function () {
        clientWidth = document.body.clientWidth;
        lastLoacl = sliderClass.length - parseInt(clientWidth / itemWidth);
    });

//滑动完成后检查是否超出右边最适合位置，超出则回滚到最合适位置
function doSlideAfter(newIndex, newSlide) {
    if (lastLoacl <= 0) {
        sliderClass.slide(0);
    } else if (newIndex > lastLoacl && lastLoacl > 0) {
        sliderClass.slide(lastLoacl);
    }
}

达到回滚到最合适位置的效果，保持UI的美观和便利

插件下载地址：

https://github.com/qiqiboy/touchslider