手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行；还有就是用到css3里的 transform：translate（x,y）;移动元素,不过发现在不支持css3的设备上马上完蛋了，所 有下定决心自己做一个，谁知出现了很多的问题，其中最重要的是给图片加链接，网页中的上下滚动条不能在拖动图片的时候滚动，并且不能兼容pc机器上的拖动；在这里就简单介绍一下遇到的问题和解决的方法；
问题一：给图片加上链接后，在拖动的时候总是跳到其他页面；
问题根源主要是不能判断是点击还是拖动，手机事件一般顺序是 touchstart-》mousedown-》mousemove-》touchmove-》mouseup-》touchend-》click，根据不同手机可能会有不同。触屏手机的事件一般都用 touchstart -》 touchmove -》 touchend -》 click，click事件是最后执行的，当我们有touchstart，touchmove，touchend处理完后，如果不进行return或取消默认就会触发click事件，这样网页就跳走了，解决办法是记录touchstart的坐标点和touchmove的坐标点，根据两个坐标点算出触点是否移动过，其中值得关注的是事件的Event参数，触屏一般是event.touches，event.targetTouches，event.changedTouches。我在测试当中发现者三个参数的值时一样的，不过值得注意的是touchend事件不会得到触点坐标（也或许是设备问题），在移动的时候touchmove会不断出发，有时候touchmove会不触发，其中就是浏览器自带一下功能把触点（或鼠标）脱离了选中的元素，比如上时间按住会出现菜单，（pc上图片就会生成一个可以拖动的缩略图），这样就要在touchstart（mousedown）的时候先event.PReventDefault();取消默认。
问题二：网页中的上下滚动条不能在拖动图片的时候滚动；
相信这个问题只要制作过得都会遇到，其实主要是在移动（touchmove，mousemove）的时候取消了默认事件event.preventDefault(),在这里我们需要做的是，是否移动获得触点和开始的触点是否一致，如果一致就直接返回，还要算出是移动的x轴多一点还是y轴移动的多一点，这样我们就可以做左右滑动的时候取消默认，在上学的时候不取消；
问题三：并且不能兼容pc机器上的拖动
这是因为在绑定事件的时候不能完全考虑事件名称是touchstart还是mousedown ，从网上搜了一下，感觉做的不做，就直接抄过来了
this.eventName={ touchstart:'touchstart', touchmove:'touchmove', touchend:'touchend', }在做判断if(!device){ this.eventName.touchstart='mousedown'; this.eventName.touchmove='mousemove'; this.eventName.touchend='mouseup'; }dom.addEventListener(this.eventName.touchstart,handleEvent,false);大概是这个意思，根据设备不同绑定不同的事件View Code其实还碰到了很多的问题，就不一一说明了
不多说了，直接把代码贴出来了，如果有什么不太好的地方，还请多多包含和提出意见
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> 6 <meta content="yes" name="apple-mobile-web-app-capable" /> 7 <meta content="black" name="apple-mobile-web-app-status-bar-style" /> 8 <meta content="telephone=no" name="format-detection" /> 9 <title></title> 10 <style type="text/css"> 11 12 html,body,*{ margin: 0; padding: 0; border: 0;} 13 #wapListImage1, #wapListImage{width: 100%; overflow: hidden; height: auto; cursor: move; zoom:1; position: relative;} 14 #wapListImage1 ul, 15 #wapListImage1 ul li, 16 #wapListImage1 ul, 17 #wapListImage ul li{ list-style: none;} 18 #wapListImage1 ul, #wapListImage ul{width: 99999px;} 19 #wapListImage1 ul li, #wapListImage ul li{ float: left;} 20 #wapListImage ul li a img:focus, 21 #wapListImage ul li a img:checked, 22 #wapListImage ul li a img, 23 #wapListImage ul li a img:active, 24 #wapListImage ul li a,#wapListImage ul li a:active{cursor: move;} 25 #wapListImage dl{ position: absolute; bottom: 10px; right: 0;} 26 #wapListImage dl span{overflow: hidden;width: 10px; height: 10px; background-color: #900; display: inline-block;} 27 #wapListImage dl span.selected{ background-color: #000;} 28 </style> 29 </head> 30 <body> 31 <div id="k"> 32 <div id="wapListImage"> 33 <ul> 34 <li><a href="javascript:void(0)" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li> 35 <li><a href="Javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li> 36 <li><a href="javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li> 37 <!-- <li><a href="javascript:void(0)" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li> 38 <li><a href="javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li> 39 <li><a href="javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li> --> 40 </ul> 41 <dl> 42 <span class="selected">1</span> 43 <span>2</span> 44 <span>3</span> 45 <!-- <span>4</span> 46 <span>5</span> 47 <span>6</span> --> 48 49 </dl> 50 </div> 51 </div> 52 <div style="height:200px;"></div> 53 <div id="wapListImage1"> 54 <ul> 55 <li><a href="javascript:void(0)" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li> 56 <li><a href="javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li> 57 <li><a href="javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li> 58 </ul> 59 </div> 60 <script type="text/javascript"> 61 ;(function(w,d){ 62 var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|Opera mini/i.test(navigator.userAgent.toLowerCase())); 63 function WapImage(){ 64 this.options={ 65 dom: null, 66 speed:200, 67 isupdate:true, 68 time:3000, 69 leftOrright:'left', 70 isfor:false, 71 callBack:function(){} 72 }, 73 this.eventName={ 74 touchstart:'touchstart', 75 touchmove:'touchmove', 76 touchend:'touchend', 77 }, 78 this.point={ 79 x:5, 80 y:5, 81 pageX1:0, 82 pageX2:0, 83 pageY1:0, 84 pageY2:0 85 }, 86 this.page={ 87 bodyWidth:320, 88 domUL:null, 89 liList:null, 90 index: 0, 91 flag:false, 92 sTime:0, 93 eTime:0, 94 isDown:false, 95 mleft:0, 96 back:30, 97 moveId:[], 98 nextId:null, 99 prevId:null,100 isdom:false101 },102 this.Event={103 handleEvent: function(event,lib){104 event = event ? event : window.event;105 // console.log(event.type)106 switch(event.type){107 108 case "touchstart":109 var touch = event.touches[0];110 case "mousedown":111 if(lib.page.isDown) return;112 lib.page.isDown=true;113 lib.page.sTime=lib.page.eTime=new Date().getTime();114
新闻热点
疑难解答
