wap图片滚动特效_无css3 元素js脚本编写

手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行；还有就是用到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{ 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{ 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; 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>

View Code

用法：

在页面加载完成后

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()