手機圖片滑動切換，網上有很多這樣的例子，但都借助于其他組件，讓代碼混亂的不行；還有就是用到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 ，從網上搜了一下，感覺做的不做，就直接抄過來了
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
|
<!doctype html><html><head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /><meta content="yes" name="apple-mobile-web-app-capable" /><meta content="black" name="apple-mobile-web-app-status-bar-style" /><meta content="telephone=no" name="format-detection" /><title></title><style type="text/css">html,body,*{ margin: 0; padding: 0; border: 0;}#wapListImage1, #wapListImage{width: 100%; overflow: hidden; height: auto; cursor: move; zoom:1; position: relative;}#wapListImage1 ul,#wapListImage1 ul li,#wapListImage1 ul,#wapListImage ul li{ list-style: none;}#wapListImage1 ul, #wapListImage ul{width: 99999px;}#wapListImage1 ul li, #wapListImage ul li{ float: left;}#wapListImage ul li a img:focus,#wapListImage ul li a img:checked,#wapListImage ul li a img,#wapListImage ul li a img:active,#wapListImage ul li a,#wapListImage ul li a:active{cursor: move;}#wapListImage dl{ position: absolute; bottom: 10px; right: 0;}#wapListImage dl span{overflow: hidden;width: 10px; height: 10px; background-color: #900; display: inline-block;}#wapListImage dl span.selected{ background-color: #000;}</style></head><body><div id="k"><div id="wapListImage"><ul><li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li><li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li><li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li><!-- <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li><li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li><li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li> --></ul><dl><span class="selected">1</span><span>2</span><span>3</span><!-- <span>4</span><span>5</span><span>6</span> --></dl></div></div><div style="height:200px;"></div><div id="wapListImage1"><ul><li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li><li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li><li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li></ul></div><script type="text/javascript">;(function(w,d){var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));function WapImage(){this.options={dom: null,speed:200,isupdate:true,time:3000,leftOrright:'left',isfor:false,callBack:function(){}},this.eventName={touchstart:'touchstart',touchmove:'touchmove',touchend:'touchend',},this.point={x:5,y:5,pageX1:0,pageX2:0,pageY1:0,pageY2:0},this.page={bodyWidth:320,domUL:null,liList:null,index: 0,flag:false,sTime:0,eTime:0,isDown:false,mleft:0,back:30,moveId:[],nextId:null,prevId:null,isdom:false},this.Event={handleEvent: function(event,lib){event = event ? event : window.event;// console.log(event.type)switch(event.type){case "touchstart":var touch = event.touches[0];case "mousedown":if(lib.page.isDown) return;lib.page.isDown=true;lib.page.sTime=lib.page.eTime=new Date().getTime();lib.Event.stop(lib,lib);if(event.type=="mousedown"){touch = event;event.preventDefault();}lib.point.pageX1 = lib.point.pageX2 = touch.pageX;lib.point.pageY1 = lib.point.pageY2 = touch.pageY;lib.page.mleft = parseFloat(lib.page.domUL.style.marginLeft);lib.page.mleft = lib.page.mleft ? lib.page.mleft : 0;break;case "touchmove":var touch = event.touches[0];case "mousemove":if(!lib.page.isDown) return;if(event.type=="mousemove"){touch = event;}lib.point.pageX2 = touch.pageX;lib.point.pageY2 = touch.pageY;if(lib.point.pageX1==lib.point.pageX2){event.preventDefault(); return false;}var changeX = lib.point.pageX1 - lib.point.pageX2;var changeY = lib.point.pageY1 - lib.point.pageY2;if(Math.abs(changeX)>Math.abs(changeY)) {//左右事件event.preventDefault(); lib.page.domUL.style.marginLeft=lib.page.mleft-changeX+'px';if(parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth){lib.page.domUL.style.marginLeft= -(lib.page.liList.length-1)*lib.page.bodyWidth+'px';lib.page.mleft=-(lib.page.liList.length-1)*lib.page.bodyWidth;}if(parseFloat(lib.page.domUL.style.marginLeft)>0){lib.page.domUL.style.marginLeft='0px';lib.page.mleft=0;}}else if(Math.abs(changeY)>Math.abs(changeX)){//上下事件}else{//長按或點擊}break;case "mouseup":case "touchend":if(!lib.page.isDown) return;lib.page.eTime=new Date().getTime();lib.page.mleft = parseFloat(lib.page.domUL.style.marginLeft);lib.page.mleft = lib.page.mleft ? lib.page.mleft : 0;var changeX = lib.point.pageX1 - lib.point.pageX2;var changeY = lib.point.pageY1 - lib.point.pageY2;if(Math.abs(changeX)>Math.abs(changeY)) {//左右事件event.preventDefault();lib.Event.move.call(this,lib);}else if(Math.abs(changeY)>Math.abs(changeX)){//上下事件lib.Event.move.call(this,lib);}else{//長按或點擊if((lib.page.eTime - lib.page.sTime) > 300) {//長按}else{//點擊if(event.button==0 || event.type=='touchend'){var a = lib.page.liList[lib.page.index].getElementsByTagName('a')[0];if(typeof a.getAttribute('target')=='object'){w.location=a.getAttribute('hrefto')}else{w.open(a.getAttribute('hrefto'));}}}}lib.page.isDown=false;break;default:break;}},position: function(lib,index){// if(index==undefined){// lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';// }else{// lib.page.domUL.style.marginLeft= -(index*lib.page.bodyWidth) +'px';// lib.page.index=index;// }if(!lib.options.isfor){if(index==undefined){lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';}else{lib.page.domUL.style.marginLeft= -((index-1)*lib.page.bodyWidth) +'px';lib.page.index=index-1;}lib.options.callBack({"index":parseInt(lib.page.liList[lib.page.index].getAttribute('index'))+1});}else{if(index==undefined){lib.page.domUL.style.marginLeft= -lib.page.bodyWidth +'px';}else{lib.page.domUL.style.marginLeft= -lib.page.bodyWidth +'px';while(true){if(parseInt(index)==parseInt(lib.page.liList[1].getAttribute('index'))+1){break;}lib.page.domUL.insertBefore(lib.page.liList[lib.page.liList.length-1],lib.page.liList[0]);}}lib.options.callBack({"index":parseInt(lib.page.liList[1].getAttribute('index'))+1});}},stop:function(lib){for(var i =0;i<lib.page.moveId.length;i++){clearInterval(lib.page.moveId[i]);}lib.page.moveId=[];},start:function(lib){if(lib.options.isupdate){lib.page.moveId[lib.page.moveId.length] = setInterval(function(){if(lib.options.leftOrright=='left'){lib.Event.next(lib,lib);}else{lib.Event.prev(lib,lib);}},lib.options.time);}},next:function(lib){// console.log(lib.page.prevId.length+"nextId")// for (var n=0;n<lib.page.prevId.length;n++) {// // clearInterval(lib.page.prevId[n]);// };// lib.page.prevId=[];clearInterval(lib.page.prevId);lib.page.prevId=null;// var left = (lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.speed;var yu = Math.abs(parseInt(lib.page.domUL.style.marginLeft));while(true){if(yu==0){yu=lib.page.bodyWidth;break;}else if(yu<0){yu= Math.abs(yu);break;}yu=yu-lib.page.bodyWidth}// var left = (lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.speed;var left = yu/lib.options.speed;var c = 0;if(lib.page.index==lib.page.liList.length-1){lib.page.flag=false;return;}clearInterval(lib.page.nextId);lib.page.nextId = window.setInterval(function(){// lib.Event.stop(lib,lib);// if(lib.page.moveId==null){// clearInterval(id);// }c=c+5;lib.page.domUL.style.marginLeft= (parseFloat(lib.page.domUL.style.marginLeft)-left*5)+'px';// console.log("next"+lib.page.domUL.style.marginLeft);if(c>=lib.options.speed || parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth ){if(parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth){lib.page.domUL.style.marginLeft= -(lib.page.liList.length-1)*lib.page.bodyWidth+'px';}clearInterval(lib.page.nextId);// for(var n=0;n=lib.page.nextId.length;n++){// clearInterval(lib.page.nextId[0]);// }// lib.page.nextId=[];lib.page.index++;lib.page.flag=false;lib.Event.domUpdate.call(this,lib,'r');if(lib.page.moveId.length==0){lib.Event.start(lib,lib);}}},5);},prev:function(lib){// console.log(lib.page.nextId.length+"nextId")// for(var n=0;n=lib.page.nextId.length;n++){// // clearInterval(lib.page.nextId[0]);// }clearInterval(lib.page.nextId);lib.page.nextId=null;// lib.page.nextId=[];// var left = (lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.speed;// var left = (lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.speed;var yu = Math.abs(parseInt(lib.page.domUL.style.marginLeft));// console.log(yu+"----"+lib.page.domUL.style.marginLeft)while(true){if(yu==0){yu=lib.page.bodyWidth;break;}else if(yu<0){yu= lib.page.bodyWidth-Math.abs(yu);break;}yu=yu-lib.page.bodyWidth}// var left = (lib.page.bodyWidth-yu)/lib.options.speed;var left = yu/lib.options.speed;var c = 0,id;if(lib.page.index==0){lib.page.flag=false;return;} var ml = parseFloat(lib.page.domUL.style.marginLeft);clearInterval(lib.page.prevId);lib.page.prevId = window.setInterval(function(){c=c+5;lib.page.domUL.style.marginLeft= (parseFloat(lib.page.domUL.style.marginLeft)+left*5)+'px';// console.log(lib.page.domUL.style.marginLeft);if(c>=lib.options.speed || parseFloat(lib.page.domUL.style.marginLeft)>=0){if(parseFloat(lib.page.domUL.style.marginLeft)>=0){lib.page.domUL.style.marginLeft='0px';}clearInterval(lib.page.prevId);// for (var n=0;n<lib.page.prevId.length;n++) {// clearInterval(lib.page.prevId[n]);// };// lib.page.prevId=[];lib.page.index--;lib.page.flag=false;lib.Event.domUpdate.call(this,lib,'l');if(lib.page.moveId.length==0){lib.Event.start(lib,lib);}}},5);},move:function(lib){if(lib.page.flag) return;lib.page.flag=true;if(Math.abs(lib.point.pageX1-lib.point.pageX2)<lib.page.back){var h = Math.abs(Math.abs(parseFloat(lib.page.domUL.style.marginLeft))-Math.abs(lib.page.bodyWidth*lib.page.index))h = h/70;var hi = 0;var hid;hid = window.setInterval(function(){if(lib.point.pageX2>lib.point.pageX1){lib.page.domUL.style.marginLeft = (parseFloat(lib.page.domUL.style.marginLeft) - h*5) +'px';}else{lib.page.domUL.style.marginLeft = (parseFloat(lib.page.domUL.style.marginLeft) + h*5) + 'px';}hi=hi+5;if(hi>=70){clearInterval(hid);lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';lib.page.flag=false;}},5);return;}if(lib.point.pageX1-lib.point.pageX2>0){lib.Event.next.call(this,lib);}else if(lib.point.pageX2-lib.point.pageX1>0){// console.log("===")lib.Event.prev.call(this,lib);}},domUpdate: function(lib,type){if(lib.page.isdom) return;lib.page.isdom=true;if(!lib.options.isfor){var index = lib.page.liList[lib.page.index].getAttribute('index');lib.options.callBack({"index":parseInt(index)+1});lib.page.isdom=false;return;}if(type=='l'){lib.page.domUL.insertBefore(lib.page.liList[lib.page.liList.length-1],lib.page.liList[0]);lib.page.domUL.style.marginLeft=-lib.page.bodyWidth+'px';//(parseFloat(lib.page.domUL.style.marginLeft)-lib.page.bodyWidth)+'px';//lib.page.index++;}else if(type=='r'){lib.page.domUL.appendChild(lib.page.liList[0]);lib.page.domUL.style.marginLeft=-lib.page.bodyWidth+'px';//(parseFloat(lib.page.domUL.style.marginLeft)+lib.page.bodyWidth)+'px';//lib.page.index--;}lib.page.index=1;// console.log(lib.page.index)var index = lib.page.liList[lib.page.index].getAttribute('index');lib.options.callBack({"index":parseInt(index)+1});lib.page.isdom=false;}};};WapImage.prototype = {setoption: function(arg){for(var i in this.options){this.options[i]= arg[i] !== undefined ? arg[i] : this.options[i];}if(!device){this.eventName.touchstart='mousedown';this.eventName.touchmove='mousemove';this.eventName.touchend='mouseup';}//return temp;},bindEvent: function(){var lib = this;this.page.domUL.addEventListener(this.eventName.touchstart,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);w.addEventListener(this.eventName.touchmove,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);w.addEventListener(this.eventName.touchend,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);w.addEventListener('resize',function(){lib.init();},false);},init:function(){this.page.bodyWidth=document.body.clientWidth;this.page.liList= this.options.dom.getElementsByTagName('li');this.page.domUL = this.options.dom.getElementsByTagName('ul')[0];this.options.dom.style.width=this.page.bodyWidth+'px';for(var i=0;i<this.page.liList.length;i++){var item = this.page.liList[i];var img = item.getElementsByTagName('img')[0];item.setAttribute('index',i);item.style.width=this.page.bodyWidth+'px';img.style.width = this.page.bodyWidth+'px';}if(this.page.liList.length<3){var length = this.page.liList.length;if(length==1){this.page.domUL.appendChild(this.page.liList[0].cloneNode(true));this.page.domUL.appendChild(this.page.liList[0].cloneNode(true));}else{for(var i=0;i<length;i++){this.page.domUL.appendChild(this.page.liList[i].cloneNode(true));}}this.page.liList= this.options.dom.getElementsByTagName('li'); }},position:function(index){this.Event.position.call(this,this,index);},next:function(){this.Event.next.call(this,this);},prev:function(){this.Event.prev.call(this,this);},start: function(arg){this.setoption(arg);this.init();this.position();this.bindEvent();this.Event.domUpdate(this,'l');this.Event.start(this);}};var loaded=function(){w.WapImage=new WapImage();w.WapImages=new WapImage();};(function(){if(d.body){loaded();}else{if(d.addEventListener){d.addEventListener( 'DOMContentLoaded', function(){d.removeEventListener( 'DOMContentLoaded', arguments.callee, false );loaded();}, false );}else if(d.attachEvent){d.attachEvent( 'onreadystatechange', function(){if( d.readyState === 'complete' ){d.detachEvent( 'onreadystatechange', arguments.callee );loaded();}});}}})();})(window,document,undefined);window.onload = function(){var obj = {dom:document.getElementById('wapListImage'),isupdate:true,time:3000,isfor:true,leftOrright:'left',callBack:function(obj){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 obj2 = {dom:document.getElementById('wapListImage1'),callBack:function(obj){// console.log(obj.index)}};WapImages.start(obj2);// var img = new w.WapImage();// img.start(obj);}</script></body></html> |
用法：
在頁面加載完成后
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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()
