首页 > 代码库 > wap图片滚动特效_无css3 元素js脚本编写
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);大概是这个意思，根据设备不同绑定不同的事件
其实还碰到了很多的问题，就不一一说明了
不多说了，直接把代码贴出来了，如果有什么不太好的地方，还请多多包含和提出意见
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 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.bodyWidth267 }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.bodyWidth324 }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()
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。