通知：本组件已经于2012年11月30日更新至1.2版本，请移步至《TouchSlider 1.2发布 – 支持宽度不固定幻灯》阅读。
注：应该是不支持IE6的。支持安卓系、iOS苹果机、平板以及PC上的浏览器，包括IE7、IE8等。
触屏手机越来越流行，所以制作网站也要越来越多的考虑手机用户的使用体验。网站上如果有轮换图片的幻灯片（走马灯）之类的功能，就要考虑触屏手机用户的使用体验，而提供他们可以通过手指滑动来切换上一张/下一张的功能，将会是很大的体验提升。
基于此考虑，我在参考了Swipe的实现后，开发了可以同时支持触屏手机手指滑动与PC上鼠标点击滑动的一段脚本，命名为“TouchSlider”。(已经有叫这个名字的脚本了？俺NO Care ^_^)。
为什么开发这个东西
上面已经说了，是为了支持触屏手机。其实还有一个更重要的原因是，为了适应手机版网站的自适应宽度特性。
由于手机、平板终端的多样性，其手机屏的分辨率各不相同，而许多网站为了适应多种设备的显示，往往是使用了自适应宽度的设计，也就是说页面宽度会随着所使用的设备的分辨率不同而有所变化，旋转设备方向后网站宽度也会变化。
之前的许多幻灯脚本只支持固定高宽的幻灯显示，所以在手机上并不能很好的工作。
这个TouchSlider的特点
也没什么特别的，主要是以下几点：
- 无JS库依赖，使用原生javascript开发。
手机端我个人并不建议载入太多JS，能少一个请求少一个。尤其是如果为了一个很小的功能而去载入一个jQuery或者prototype之类的库，有点太不划算了。TouchSlider整个脚本大小约12KB，压缩后只有6KB。 - 触摸滑动与点击拖动切换全支持
支持触屏手机上的触摸滑动切换，也支持PC上的点击拖动切换。详细可以参见DEMO页面，并实际使用体验。用触屏手机的可以用手指滑动切换，电脑端的用户可以用鼠标点击拖动切换。 - 幻灯支持多个方向切换
支持向左、向右以及向上和向下滑动切换。 - 支持自适应浏览器宽度
手机横竖屏切换或者改变浏览器宽度时，全宽度幻灯依然能正常工作适应
TouchSlider的使用以及demo
使用方法，载入TouchSlider的脚本文件，然后可以通过实例化“TouchSlider”这个类来使用。例如：
1: new TouchSlider({
2: 'id': 'slider', //幻灯容器的id
3: 'auto': 0, //是否自动开始，负数表示非自动开始，0,1,2,3....表示自动开始以及从第几个开始
4: 'speed':600, //动画效果持续时间 ms
5: 'timeout':5000,//幻灯切换的间隔时间 ms
6: 'className':'', //每个幻灯所在的li标签的classname,
7: 'direction':'left', //left right up down
8: 'mouseWheel':false,//是否支持鼠标滚轮
9: 'before':new Function(),//幻灯切换前的回调
10: 'after':new Function() //幻灯切换后的回调
11: });
12:
这样子幻灯就会工作了。
当然，为了方便用户通过点击“上一张”/“下一张”来切换，实例化后的这个对象也具有一些方法来很方便的进行操作：
1: var slider=new TouchSlider({id:'slider'});
2:
3: //切换上一张
4: slider.prev();
5:
6: //切换下一张
7: slider.next();
8:
9: //向前或者向后切换N张，例如，向前切换2张，可以通过 slider.prev(2) 来实现
10: sldier.prev(num);
11: slider.next(num);
12:
13: //暂停幻灯播放
14: slider.pause();
15:
16: //开始播放
17: slider.begin();
18:
19: //停止播放
20: slider.stop();
21:
22: //播放第N张幻灯片。N等于0,1,2...幻灯片数量
23: sldier.slide(N)
24:
25: //TouchSlider对象具有的其他属性
26: slider.index //当前显示的幻灯的次序
27: slider.length //幻灯片数量
28: slider.width, slider.height //幻灯当前的宽度 高度（可能会随着浏览器尺寸变化而变化）
29: slider.status //幻灯的状态。0表示停止，1表示正在播放，2表示暂停。-1表示脚本出错。如果出错，slider.errorInfo提供了出错信息
30:
