휴대폰 이미지의 슬라이딩 전환 인터넷에는 이러한 예가 많이 있지만 모두 다른 구성 요소에 의존하므로 CSS3에서 변환을 사용하는 경우도 있습니다(x, y); 요소를 이동하려고 했는데 CSS3를 지원하지 않는 기기에서는 거의 끝나가는 걸 발견하고 직접 만들기로 했으나 가장 중요한 문제는 그림에 대한 링크를 추가하는 것이었습니다. 사진을 드래그할 때 웹페이지를 스크롤할 수 없으며 PC 컴퓨터에서 드래그하는 것과 호환되지 않습니다. 여기서는 발생한 문제와 해결 방법을 간략하게 소개하겠습니다.
문제 1: 이미지에 링크를 추가한 후 드래그하면 항상 다른 페이지로 이동합니다.문제의 주요 원인은 클릭인지 드래그인지 확인할 수 없다는 것입니다. 휴대폰 이벤트의 일반적인 순서는 touchstart->mousedown->mousemove->touchmove->mouseup->touchend->click입니다. 휴대폰 기종에 따라 다를 수 있습니다. 터치스크린 휴대폰의 이벤트는 일반적으로 touchstart -> touchmove -> touchend -> click을 사용합니다. touchstart, touchmove, touchend 처리 시 기본값을 반환하거나 취소하지 않으면 click 이벤트가 발생합니다. 가 발생하므로 웹페이지가 이동하게 됩니다. 해결 방법은 touchstart의 좌표점과 touchmove의 좌표점을 기록하고 두 좌표점을 기준으로 터치점이 이동했는지 여부를 계산하는 것입니다. 이벤트의 이벤트 매개변수입니다. 터치스크린은 일반적으로 touches, event.targetTouches, event.changedTouches입니다. 테스트 중에 세 가지 매개변수의 값이 동일한 것을 발견했습니다. 그러나 touchend 이벤트가 터치 포인트 좌표를 가져오지 못한다는 점은 주목할 가치가 있습니다(기기 문제일 수 있습니다). 때로는 touchmove가 트리거되지 않습니다. 이는 브라우저에 선택한 요소에서 터치 포인트(또는 마우스)를 분리하는 기능이 내장되어 있음을 의미합니다. 예를 들어 오랫동안 누르고 있으면 메뉴가 나타납니다. 나타나므로(PC의 그림은 드래그할 수 있는 썸네일을 생성합니다), 기본값을 취소하려면 시작(마우스다운)을 터치할 때 event.preventDefault()를 사용해야 합니다.
문제 2: 이미지를 드래그할 때 웹페이지의 위아래 스크롤 막대가 스크롤되지 않습니다.
만들기만 하면 이 문제가 발생할 것이라고 생각합니다. 사실 이는 주로 이동(touchmove, mousemove) 시 기본 이벤트인 event.preventDefault()가 취소되기 때문입니다. 터치 포인트를 얻기 위해 이동할지 여부와 시작 접점이 일치하는지 여부, 일치하면 직접 반환하고 x축이 더 이동하는지, y축이 더 이동하는지 계산하여 기본값을 취소할 수 있습니다. 좌우로 슬라이드할 때, 학교에 갈 때 취소하지 않음
문제 3: 그리고 PC 컴퓨터에서는 드래그 기능이 호환되지 않습니다
이벤트 바인딩을 할 때 이벤트 이름이 터치스타트인지 마우스다운인지 전혀 고려하지 못해서 인터넷에서 검색해본 결과 아닌 것 같아서 직접 복사해 봤습니다
this.eventName={ touchstart:'touchstart', touchmove:'touchmove', touchend:'touchend', }
if(!device){ this.eventName.touchstart='mousedown'; this.eventName.touchmove='mousemove'; this.eventName.touchend='mouseup'; }
아마도 이것이 의미하는 바일 것입니다. 다양한 이벤트가 다양한 기기에 바인딩되어 있다는 것입니다.
더 이상 말이 필요 없고, 좋지 않은 내용이 있으면 코드만 올려서 댓글 달아주세요
<!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>
페이지가 로드된 후
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)
을 찾을 수 있습니다.
필요한 전환 사진 수를 정의하고 이름을 지정하세요
w.WapImage=new WapImage();
w.WapImages=new WapImage();
WapImage.start() 및 WapImages.start()