手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行；还有就是用到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); 大概是这个意思，根据设备不同绑定不同的事件
其实还碰到了很多的问题，就不一一说明了
不多说了，直接把代码贴出来了，如果有什么不太好的地方，还请多多包含和提出意见
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:false 101 }, 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 lib.Event.stop(lib,lib); 115 if(event.type=="mousedown"){ 116 touch = event; 117 event.preventDefault(); 118 } 119 lib.point.pageX1 = lib.point.pageX2 = touch.pageX; 120 lib.point.pageY1 = lib.point.pageY2 = touch.pageY; 121 lib.page.mleft = parseFloat(lib.page.domUL.style.marginLeft); 122 lib.page.mleft = lib.page.mleft ? lib.page.mleft : 0; 123 break; 124 case "touchmove": 125 var touch = event.touches[0]; 126 case "mousemove": 127 if(!lib.page.isDown) return; 128 129 if(event.type=="mousemove"){ 130 touch = event; 131 } 132 lib.point.pageX2 = touch.pageX; 133 lib.point.pageY2 = touch.pageY; 134 135 136 if(lib.point.pageX1==lib.point.pageX2){ 137 event.preventDefault(); 138 return false; 139 } 140 var changeX = lib.point.pageX1 - lib.point.pageX2; 141 var changeY = lib.point.pageY1 - lib.point.pageY2; 142 if(Math.abs(changeX)>Math.abs(changeY)) {//左右事件 143 event.preventDefault(); 144 lib.page.domUL.style.marginLeft=lib.page.mleft-changeX+‘px‘; 145 if(parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth){ 146 lib.page.domUL.style.marginLeft= -(lib.page.liList.length-1)*lib.page.bodyWidth+‘px‘; 147 lib.page.mleft=-(lib.page.liList.length-1)*lib.page.bodyWidth; 148 } 149 if(parseFloat(lib.page.domUL.style.marginLeft)>0){ 150 lib.page.domUL.style.marginLeft=‘0px‘; 151 lib.page.mleft=0; 152 } 153 154 155 }else if(Math.abs(changeY)>Math.abs(changeX)){//上下事件 156 157 }else{//长按或点击 158 159 } 160 break; 161 case "mouseup": 162 case "touchend": 163 if(!lib.page.isDown) return; 164 lib.page.eTime=new Date().getTime(); 165 lib.page.mleft = parseFloat(lib.page.domUL.style.marginLeft); 166 lib.page.mleft = lib.page.mleft ? lib.page.mleft : 0; 167 168 var changeX = lib.point.pageX1 - lib.point.pageX2; 169 var changeY = lib.point.pageY1 - lib.point.pageY2; 170 if(Math.abs(changeX)>Math.abs(changeY)) {//左右事件 171 172 event.preventDefault(); 173 lib.Event.move.call(this,lib); 174 175 }else if(Math.abs(changeY)>Math.abs(changeX)){//上下事件 176 lib.Event.move.call(this,lib); 177 }else{//长按或点击 178 if((lib.page.eTime - lib.page.sTime) > 300) {//长按 179 }else{//点击 180 if(event.button==0 || event.type==‘touchend‘){ 181 var a = lib.page.liList[lib.page.index].getElementsByTagName(‘a‘)[0]; 182 if(typeof a.getAttribute(‘target‘)==‘object‘){ 183 w.location=a.getAttribute(‘hrefto‘) 184 }else{ 185 w.open(a.getAttribute(‘hrefto‘)); 186 } 187 } 188 189 } 190 } 191 lib.page.isDown=false; 192 break; 193 default: 194 break; 195 } 196 }, 197 position: function(lib,index){ 198 // if(index==undefined){ 199 // lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +‘px‘; 200 // }else{ 201 // lib.page.domUL.style.marginLeft= -(index*lib.page.bodyWidth) +‘px‘; 202 // lib.page.index=index; 203 // } 204 205 206 207 208 if(!lib.options.isfor){ 209 if(index==undefined){ 210 lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +‘px‘; 211 }else{ 212 lib.page.domUL.style.marginLeft= -((index-1)*lib.page.bodyWidth) +‘px‘; 213 lib.page.index=index-1; 214 } 215 lib.options.callBack({"index":parseInt(lib.page.liList[lib.page.index].getAttribute(‘index‘))+1}); 216 }else{ 217 if(index==undefined){ 218 lib.page.domUL.style.marginLeft= -lib.page.bodyWidth +‘px‘; 219 }else{ 220 lib.page.domUL.style.marginLeft= -lib.page.bodyWidth +‘px‘; 221 while(true){ 222 if(parseInt(index)==parseInt(lib.page.liList[1].getAttribute(‘index‘))+1){ 223 break; 224 } 225 lib.page.domUL.insertBefore(lib.page.liList[lib.page.liList.length-1],lib.page.liList[0]); 226 } 227 } 228 lib.options.callBack({"index":parseInt(lib.page.liList[1].getAttribute(‘index‘))+1}); 229 } 230 }, 231 stop:function(lib){ 232 for(var i =0;i<lib.page.moveId.length;i++){ 233 clearInterval(lib.page.moveId[i]); 234 } 235 lib.page.moveId=[]; 236 }, 237 start:function(lib){ 238 if(lib.options.isupdate){ 239 lib.page.moveId[lib.page.moveId.length] = setInterval(function(){ 240 if(lib.options.leftOrright==‘left‘){ 241 lib.Event.next(lib,lib); 242 }else{ 243 lib.Event.prev(lib,lib); 244 } 245 },lib.options.time); 246 } 247 }, 248 next:function(lib){ 249 // console.log(lib.page.prevId.length+"nextId") 250 // for (var n=0;n<lib.page.prevId.length;n++) { 251 // // clearInterval(lib.page.prevId[n]); 252 // }; 253 // lib.page.prevId=[]; 254 clearInterval(lib.page.prevId); 255 lib.page.prevId=null; 256 // var left = (lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.speed; 257 var yu = Math.abs(parseInt(lib.page.domUL.style.marginLeft)); 258 while(true){ 259 if(yu==0){ 260 yu=lib.page.bodyWidth; 261 break; 262 }else if(yu<0){ 263 yu= Math.abs(yu); 264 break; 265 } 266 yu=yu-lib.page.bodyWidth 267 } 268 // var left = (lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.speed; 269 var left = yu/lib.options.speed; 270 var c = 0; 271 if(lib.page.index==lib.page.liList.length-1){ 272 lib.page.flag=false; 273 return; 274 } 275 clearInterval(lib.page.nextId); 276 lib.page.nextId = window.setInterval(function(){ 277 // lib.Event.stop(lib,lib); 278 // if(lib.page.moveId==null){ 279 // clearInterval(id); 280 // } 281 c=c+5; 282 lib.page.domUL.style.marginLeft= (parseFloat(lib.page.domUL.style.marginLeft)-left*5)+‘px‘; 283 // console.log("next"+lib.page.domUL.style.marginLeft); 284 if(c>=lib.options.speed || parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth ){ 285 if(parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth){ 286 lib.page.domUL.style.marginLeft= -(lib.page.liList.length-1)*lib.page.bodyWidth+‘px‘; 287 } 288 clearInterval(lib.page.nextId); 289 // for(var n=0;n=lib.page.nextId.length;n++){ 290 // clearInterval(lib.page.nextId[0]); 291 // } 292 // lib.page.nextId=[]; 293 lib.page.index++; 294 lib.page.flag=false; 295 lib.Event.domUpdate.call(this,lib,‘r‘); 296 if(lib.page.moveId.length==0){ 297 lib.Event.start(lib,lib); 298 } 299 300 } 301 },5); 302 }, 303 prev:function(lib){ 304 // console.log(lib.page.nextId.length+"nextId") 305 // for(var n=0;n=lib.page.nextId.length;n++){ 306 // // clearInterval(lib.page.nextId[0]); 307 // } 308 clearInterval(lib.page.nextId); 309 lib.page.nextId=null; 310 // lib.page.nextId=[]; 311 // var left = (lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.speed; 312 // var left = (lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.speed; 313 var yu = Math.abs(parseInt(lib.page.domUL.style.marginLeft)); 314 // console.log(yu+"----"+lib.page.domUL.style.marginLeft) 315 while(true){ 316 if(yu==0){ 317 yu=lib.page.bodyWidth; 318 break; 319 }else if(yu<0){ 320 yu= lib.page.bodyWidth-Math.abs(yu); 321 break; 322 } 323 yu=yu-lib.page.bodyWidth 324 } 325 // var left = (lib.page.bodyWidth-yu)/lib.options.speed; 326 var left = yu/lib.options.speed; 327 var c = 0,id; 328 if(lib.page.index==0){ 329 lib.page.flag=false; 330 return; 331 } 332 var ml = parseFloat(lib.page.domUL.style.marginLeft); 333 clearInterval(lib.page.prevId); 334 lib.page.prevId = window.setInterval(function(){ 335 c=c+5; 336 lib.page.domUL.style.marginLeft= (parseFloat(lib.page.domUL.style.marginLeft)+left*5)+‘px‘; 337 // console.log(lib.page.domUL.style.marginLeft); 338 if(c>=lib.options.speed || parseFloat(lib.page.domUL.style.marginLeft)>=0){ 339 if(parseFloat(lib.page.domUL.style.marginLeft)>=0){ 340 lib.page.domUL.style.marginLeft=‘0px‘; 341 } 342 343 clearInterval(lib.page.prevId); 344 // for (var n=0;n<lib.page.prevId.length;n++) { 345 // clearInterval(lib.page.prevId[n]); 346 // }; 347 // lib.page.prevId=[]; 348 349 lib.page.index--; 350 lib.page.flag=false; 351 lib.Event.domUpdate.call(this,lib,‘l‘); 352 if(lib.page.moveId.length==0){ 353 lib.Event.start(lib,lib); 354 } 355 } 356 },5); 357 }, 358 move:function(lib){ 359 if(lib.page.flag) return; 360 lib.page.flag=true; 361 if(Math.abs(lib.point.pageX1-lib.point.pageX2)<lib.page.back){ 362 var h = Math.abs(Math.abs(parseFloat(lib.page.domUL.style.marginLeft))-Math.abs(lib.page.bodyWidth*lib.page.index)) 363 h = h/70; 364 365 var hi = 0; 366 var hid; 367 hid = window.setInterval(function(){ 368 369 if(lib.point.pageX2>lib.point.pageX1){ 370 lib.page.domUL.style.marginLeft = (parseFloat(lib.page.domUL.style.marginLeft) - h*5) +‘px‘; 371 }else{ 372 373 lib.page.domUL.style.marginLeft = (parseFloat(lib.page.domUL.style.marginLeft) + h*5) + ‘px‘; 374 } 375 hi=hi+5; 376 if(hi>=70){ 377 clearInterval(hid); 378 lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +‘px‘; 379 lib.page.flag=false; 380 } 381 },5); 382 return; 383 } 384 385 386 if(lib.point.pageX1-lib.point.pageX2>0){ 387 lib.Event.next.call(this,lib); 388 }else if(lib.point.pageX2-lib.point.pageX1>0){ 389 // console.log("===") 390 lib.Event.prev.call(this,lib); 391 } 392 }, 393 domUpdate: function(lib,type){ 394 if(lib.page.isdom) return; 395 lib.page.isdom=true; 396 397 if(!lib.options.isfor){ 398 var index = lib.page.liList[lib.page.index].getAttribute(‘index‘); 399 lib.options.callBack({"index":parseInt(index)+1}); 400 lib.page.isdom=false; 401 return; 402 } 403 if(type==‘l‘){ 404 lib.page.domUL.insertBefore(lib.page.liList[lib.page.liList.length-1],lib.page.liList[0]); 405 lib.page.domUL.style.marginLeft=-lib.page.bodyWidth+‘px‘;//(parseFloat(lib.page.domUL.style.marginLeft)-lib.page.bodyWidth)+‘px‘; 406 //lib.page.index++; 407 }else if(type==‘r‘){ 408 lib.page.domUL.appendChild(lib.page.liList[0]); 409 lib.page.domUL.style.marginLeft=-lib.page.bodyWidth+‘px‘;//(parseFloat(lib.page.domUL.style.marginLeft)+lib.page.bodyWidth)+‘px‘; 410 //lib.page.index--; 411 } 412 lib.page.index=1; 413 // console.log(lib.page.index) 414 var index = lib.page.liList[lib.page.index].getAttribute(‘index‘); 415 lib.options.callBack({"index":parseInt(index)+1}); 416 lib.page.isdom=false; 417 } 418 }; 419 }; 420 WapImage.prototype = { 421 setoption: function(arg){ 422 for(var i in this.options){ 423 this.options[i]= arg[i] !== undefined ? arg[i] : this.options[i]; 424 } 425 if(!device){ 426 this.eventName.touchstart=‘mousedown‘; 427 this.eventName.touchmove=‘mousemove‘; 428 this.eventName.touchend=‘mouseup‘; 429 } 430 //return temp; 431 }, 432 bindEvent: function(){ 433 var lib = this; 434 this.page.domUL.addEventListener(this.eventName.touchstart,function(event){lib.Event.handleEvent.call(lib,event,lib);},false); 435 w.addEventListener(this.eventName.touchmove,function(event){lib.Event.handleEvent.call(lib,event,lib);},false); 436 w.addEventListener(this.eventName.touchend,function(event){lib.Event.handleEvent.call(lib,event,lib);},false); 437 w.addEventListener(‘resize‘,function(){lib.init();},false); 438 }, 439 init:function(){ 440 this.page.bodyWidth=document.body.clientWidth; 441 this.page.liList= this.options.dom.getElementsByTagName(‘li‘); 442 this.page.domUL = this.options.dom.getElementsByTagName(‘ul‘)[0]; 443 this.options.dom.style.width=this.page.bodyWidth+‘px‘; 444 445 for(var i=0;i<this.page.liList.length;i++){ 446 var item = this.page.liList[i]; 447 var img = item.getElementsByTagName(‘img‘)[0]; 448 item.setAttribute(‘index‘,i); 449 item.style.width=this.page.bodyWidth+‘px‘; 450 img.style.width = this.page.bodyWidth+‘px‘; 451 } 452 if(this.page.liList.length<3){ 453 var length = this.page.liList.length; 454 if(length==1){ 455 this.page.domUL.appendChild(this.page.liList[0].cloneNode(true)); 456 this.page.domUL.appendChild(this.page.liList[0].cloneNode(true)); 457 }else{ 458 for(var i=0;i<length;i++){ 459 this.page.domUL.appendChild(this.page.liList[i].cloneNode(true)); 460 } 461 } 462 463 this.page.liList= this.options.dom.getElementsByTagName(‘li‘); 464 } 465 }, 466 position:function(index){ 467 this.Event.position.call(this,this,index); 468 }, 469 next:function(){ 470 this.Event.next.call(this,this); 471 }, 472 prev:function(){ 473 this.Event.prev.call(this,this); 474 }, 475 start: function(arg){ 476 this.setoption(arg); 477 this.init(); 478 this.position(); 479 this.bindEvent(); 480 this.Event.domUpdate(this,‘l‘); 481 this.Event.start(this); 482 483 } 484 }; 485 var loaded=function(){ 486 w.WapImage=new WapImage(); 487 w.WapImages=new WapImage(); 488 }; 489 (function(){ 490 if(d.body){ 491 loaded(); 492 }else{ 493 if(d.addEventListener){ 494 d.addEventListener( ‘DOMContentLoaded‘, function(){ 495 d.removeEventListener( ‘DOMContentLoaded‘, arguments.callee, false ); 496 loaded(); 497 }, false ); 498 }else if(d.attachEvent){ 499 d.attachEvent( ‘onreadystatechange‘, function(){ 500 if( d.readyState === ‘complete‘ ){ 501 d.detachEvent( ‘onreadystatechange‘, arguments.callee ); 502 loaded(); 503 } 504 }); 505 } 506 } 507 })(); 508 })(window,document,undefined); 509 510 window.onload = function(){ 511 var obj = { 512 dom:document.getElementById(‘wapListImage‘), 513 isupdate:true, 514 time:3000, 515 isfor:true, 516 leftOrright:‘left‘, 517 callBack:function(obj){ 518 var span = document.getElementById(‘wapListImage‘).getElementsByTagName(‘dl‘)[0].getElementsByTagName(‘span‘); 519 for(var k = 0;k<span.length;k++){ 520 span[k].className=‘‘; 521 } 522 span[obj.index-1].className=‘selected‘ 523 // console.log(obj.index) 524 } 525 }; 526 WapImage.start(obj); 527 WapImage.position(2) 528 var obj2 = { 529 dom:document.getElementById(‘wapListImage1‘), 530 callBack:function(obj){ 531 // console.log(obj.index) 532 } 533 }; 534 WapImages.start(obj2); 535 // var img = new w.WapImage(); 536 // img.start(obj); 537 } 538 </script> 539 </body> 540 </html>
用法：
在页面加载完成后
var obj = {
dom:document.getElementById(‘wapListImage‘),//dom元素
isupdate:true,//是否自动切换
time:3000,//自动切换的时间毫秒
isfor:true, //是否循环播放，即到最后一张是否直接转入第一张，或到第一张直接转入最后一张
leftOrright:‘left‘,//像左侧自动切换还是像右侧自动切换
callBack:function(obj){//切换成功后回调函数 其实有index参数为当前第几张图片
//自己处理
var span = document.getElementById(‘wapListImage‘).getElementsByTagName(‘dl‘)[0].getElementsByTagName(‘span‘);
for(var k = 0;k<span.length;k++){
span[k].className=‘‘;
}
span[obj.index-1].className=‘selected‘
// console.log(obj.index)
}
};
WapImage.start(obj);
WapImage.position(2)
如果一个也没需要多个图片切换效果可以再代码中查找 var loaded=function()
在其中定义您需要个切换图片个数，并定出名字
如
w.WapImage=new WapImage();
w.WapImages=new WapImage();
在页面加载完后就可以直接调用
WapImage.start()和WapImages.start()
wap图片滚动特效_无css3 元素js脚本编写,布布扣,bubuko.com
原文：http://www.cnblogs.com/tongchuanxing/p/wap_img_javascript.html
