朋友炒股两个月赚了10万，我帮他推广一下公众号，把钱用来投资总比放银行连通货膨胀都跑不过里强， 硬核离职，在家炒股 ，这是他每天的日志，有些经验是花钱也买不到的。
一、前言
去年接触了移动Web开发，做了些手机端的网站及应用，还有些小的微信游戏和活动页面。每个项目里或多或少的都会有一些触屏事件等。其中有两个用到了jquery触屏幻灯片。刚开始的时候也在百度上搜索了一翻，但最终都没有找到合适的，因此就觉得自己写一个了。下面的例子是我在已前的项目里摘出来的，对于触屏本人也不算老鸟，有写的不足的地方请大家提出反馈意见。附件为源码和使用教程，该幻灯片兼容安卓、iphone、和大winphone手机。可放心使用。使用时请注明版权及出处。
二、内容
幻灯片切换：屏幕的可视区域根据手指触发屏幕的滑动来动态切换需要展示的图片，这里涉及到两个过程：
一、触屏事件监控，手指针对于触屏的滑动事件。
W3C标准针对触屏操作主要用到三大块内容：事件、Touch对象、TouchEvent对象。
共有4个事件：touchstart、touchmove、touchend、touchcancel
(1)touchstart：触摸点触摸到触屏表面时触发。
(2)touchmove：触摸点在触屏上移动时触发。
(3)touchend：触摸点离开触屏上时触发。
(4)touchcancel：触摸点取消时触发。
常用的事件有3种：touchstart、touchmove、touchend
Touch对象共8种属性：identifier、target、screenX、screenY、clientX、clientY、pageX、pageY
(1)identifier：只读，long类型，针对每一个touch事件的统一标识，常用于多指触发的事件处理。
(2)target：只读， <script src=”Script/jquery-2.1.1.js”></script> 说明：tempstyle是外层的div，无实际意义，在使用中把这个div换成项目中要放幻灯的div即可。<div class=”xtouchslider-wrapper”></div>为内层。xtouchslider-wrapper的样式为宽高都为100%，因此在使用过程中只需要针对tempstyle的div进行设计宽高即可。 4，效果
<script src=”Script/xtouchslider.js”></script>
<style type=”text/css”>
html, body {
padding: 0px;
margin: 0px;
height: 100%;
} .tempstyle {
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<div class=”tempstyle”>
<div class=”xtouchslider-wrapper”>
<div class=”xtouchslider-item-wrapper”>
<div class=”xtouchslider-item-on”><img src=”Image/1.png” /></div>
<div class=”xtouchslider-item”><img src=”Image/2.png” /></div>
<div class=”xtouchslider-item”><img src=”Image/3.png” /></div>
<div class=”xtouchslider-item”><img src=”Image/2.png” /></div>
</div>
<div class=”xtouchslider-icon-wrapper”>
</div>
</div>
</div>
</body>
</html>
四、源码打包下载
版权：http://www.cnblogs.com/iamlilinfeng
索引
