Hay muchos ejemplos de este tipo en Internet, pero todos usan otros componentes para hacer que el código sea confuso; También está el uso de transformación en CSS3: Traducir (x, y); elementos móviles, pero descubrí que casi estaba hecho en dispositivos que no admiten CSS3, así que decidí hacer uno solo. Inesperadamente, surgen muchos problemas. El más importante es vincular la imagen. Las barras de desplazamiento hacia arriba y hacia abajo en la página web no pueden desplazarse al arrastrar la imagen, y no es compatible con arrastrar la máquina PC. Aquí presentaré brevemente los problemas encontrados y las soluciones;
Pregunta 1: Después de agregar un enlace a la imagen, siempre salta a otras páginas al arrastrarlo
La razón principal del problema es que es imposible determinar si hacer clic o arrastrar. El orden general de los eventos de los teléfonos móviles es TouchStart-》 Mousedown-》 MouseMove-》 MouseUp-》 Touchend-》 Haga clic. Puede variar según el teléfono. TouchStart -》 Touchmove -》 Touchend -》 Haga clic El evento se ejecuta al final. Cuando tenemos un proceso de touchstart, touchmove, touchend y touchend, si no devolvemos o cancelamos el predeterminado, el evento de clic se activará, por lo que la página web saltará. La solución es registrar los puntos de coordenadas de TouchStart y Touchmove, y calcular si el contacto se ha movido en función de los dos puntos de coordenadas. Entre ellos, vale la pena prestar atención a los parámetros del evento del evento. La pantalla táctil es generalmente event.Touches, event.targetTouches, event.changedTouches. Encontré los valores de los tres parámetros en la prueba. Sin embargo, vale la pena señalar que el evento Touchend no obtendrá las coordenadas de contacto (o tal vez un problema del dispositivo). Touchmove continuará partiendo cuando se mueva. A veces, Touchmove no se activará. El navegador viene con una función para eliminar el contacto (o mouse) del elemento seleccionado. Por ejemplo, aparecerá presionando y manteniéndolo a tiempo (la imagen en la PC generará una miniatura arrastrada). De esta manera, event.preventDefault (); Cancele el valor predeterminado cuando TouchStart (MouseDown).
Pregunta 2: Las barras de desplazamiento hacia arriba y hacia abajo en la página web no pueden desplazarse al arrastrar la imagen
Creo que este problema se encontrará mientras se haga. De hecho, el evento predeterminado.PreventDefault () se cancela cuando se mueve (Touchmove, MouseMove). Lo que debemos hacer aquí es si se mueven los contactos y si los contactos son consistentes con el comienzo. Si son consistentes, regresarán directamente. También debe calcular si el eje X se mueve un poco más o el eje Y se mueve un poco más. De esta manera, podemos cancelar el valor predeterminado cuando nos deslizamos hacia la izquierda y hacia la derecha, y no cancelarlo al ir a la escuela;
Pregunta 3: Y no es compatible con arrastrar la máquina de PC
Esto se debe a que cuando los eventos vinculantes, no puede considerar completamente si el nombre del evento es TouchStart o Mousedown. Busqué en línea y sentí que no lo hacía, así que lo copié directamente.
this.eventName = {touchStart: 'touchStart', touchmove: 'touchmove', touchend: 'touchend',} está haciendo juicios if (! dispositivo) {this.eventName.TouchStart = 'MouseDown'; this.EventName.TouchMove = 'MouseMove'; this.eventName.Touchend = 'MouseUp';} Dom.addeventListener (this.eventName.TouchStart, HandleEvent, falso);Esto es probablemente lo que significa unir diferentes eventos de acuerdo con diferentes dispositivos.
En realidad, he encontrado muchos problemas, por lo que no los explicaré uno por uno
No diré mucho, solo publica el código. Si hay algo malo, incluya y da más opiniones
<!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 = "phone = no" name = "format-detection" /> <title> </title> <style type = "text /css"> html, cuerpo,*{margen: 0; relleno: 0; border: 0;} #waplistimage1, #wapListImage {ancho: 100%; desbordamiento: oculto; Altura: Auto; cursor: mover; 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: izquierda;}#wapListImage ul li a img: focus,#waplistimage ul li a img: checked,#waplistimage ul li a img,#waplistimage ul li a img: activo,#wapListimage ul li a,#waplistimage ul li a: activo {cursor: mudanza;}#waplistimage dl {pluste {austaus {plustee; Abajo: 10px; Derecha: 0;}#waplistimage dl span {desbordamiento: oculto; ancho: 10px; Altura: 10px; Color de fondo: #900; visualización: 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 = "noFollow" rEl = "noFlOUK" externo "rEJUding" rELA "RELTULT" RELTULAR "RELTUART" RELTUART " nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "hrefto =" ddd "target =" _ negro "> <img src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javaScript: void (0)" relat = " nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo "hrefto" hrefto = "ddd"> <img " src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuxuwq66.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javaScript: void (0)" relat = "n. rel = "nofollow externo" Rel = "externo nofollow" Rel = "externo nofollow" rel = "externo nofollow" rel = "externo nofollow" rel = "externo nofollow" rel = "externo nofollow" rel = "externo nofollow" rel = "externo 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 = " 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" 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)" relat = " nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo "externo" rel = "nofollow externo" rel = "nofollow externo" hrefto = "ddd"> <img "img" src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuxuwq66.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javaScript: void (0)" relat = "n. rel = "nofollow externo" rel = "externo nofollow" rel = "externo nofollow" rel = "externo nofollow" rel = "externo nofollow" rel = "externo" rel = "nofollow externo" hrefto = "ddd"> <img src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrxe2po83.gonglve.w690.jpeg"> </a> </li>-> </ul> <dl> <pan> 1 </span> <//////////3 <span> 4 </span> <span> 5 </span> <span> <span> 6 </span> -> </dl> </div> <div style = "altura: 200px;"> </div> <div id = "wapListImage1"> <ul> <li> <a href = "javaScripción: nofing (0)" rel = "externo nofugue" relat = "externo" externo " rel = "nofollow externo" rel = "nofollow" externo "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo "rel =" externo nofollow "rel =" externo nofollow "rel =" nofollow externo "hrefto =" ddd "objetivo =" _ negro "> <img src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javaScript: void (0)" relat = " nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "hrefto =" ddd "> <img src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuxuwq66.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javaScript: void (0)" relat = "n. rel = "nofollow externo" rel = "externo nofollow" rel = "externo nofollow" rel = "externo nofollow" rel = "externo nofollow" rel = "externo" rel = "nofollow externo" 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) {válvate = (/android | webos | iPhone | iPad | iPod | blackberry | iemobile | ópera mini/i.test (navigator.useragent.tolowercase ())); function wapiMage () {this.options = {dom: NULL, VELOCIDAD: 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, Índice: Índice: 0, indicador: falso, estimas: 0, etime: 0, isdown: false, mleft: 0, retrosp: 30, mudiD: [], nextId: null, previd: null, isdom: false}, this.event = {maneLeEvent: function (event, lib) {event = event = event? Evento: 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 = neweDime Date (). 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)) {// eventos de izquierda e izquierda 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.page.shomul.style.mar -(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)) {// eventos up and down} else {// long Presion 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 (cambiax)> Math.abs (Change)) {// Eventos izquierdo e izquierda e izquierda e izquierda e izquierda e izquierda e izquierda e izquierda e izquierda e izquierda event.preventDefault (); lib.event.move.call (this, lib);} else if (math.abs (Changey)> Math.abs (Changex)) {// up and down events lib.event.move.call (this, lib);} else {// long prensa o click if (lib.page.etime - liB.page.time) {// Long Press} else {// Haga clic 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;}}}, function (lib, index) {// if (igual 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 = índice; } 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)*libage.page.page.Bodyth) +'px'; lib.page.index = index-1;} lib.options.callback ({"index": parseInt (lib.page.lilist [lib.page.index] .getAttribute ('index')) +1});} else {if (index == indefinido) {liber.page.shidyle.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});}}, parar: función (lib) {para (var (var (var i = 0; i <lib.page.moveid.length; i ++) {ClearInterval (lib.page.moveid [i]);} lib.page.moveid = [];}, inicio: function (lib) {if (lib.options.isupdate) {lib.page.moveid [lib.page.moveid.length setInterval (function () {if (lib.options.leftorright == 'izquierda') {lib.event.next (lib, lib);} else {lib.event.prev (lib, lib);}}, lib.options.time);}}, siguiente: 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 izquierd = (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 izquierda = (lib.page.bodywidth-math.abs (parsefloat (lib.page.domul.style.marginleft)%lib.page.bodywidth))/lib.options.speed; var izquierda = 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) -Lift*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); // para (var n = 0; n = lib.page.nextid.length; n ++) {// clearval (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);}, anterior: function (lib) {// console.log (lib.page.nextid.length+"nextID") // for (var n = 0; n = lib.page.nextid.length; n ++) {// // clearVal (lib.page.nextid [0]); //} clearinval (lib.page.nextid); lib.page.nextid lib.page.nextid = []; // var izquierda = (lib.page.bodywidth-math.abs (lib.point.pagex1-lib.point.pagex2)/lib.options.speed; // var izquierda = (lib.page.bodywidth-math.abs (parsefloat (lib.page.domul.style.marginleft)%lib.page.bodywidth))/lib.options.speed; // var izquierda = (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;} if (yu <0) {yu = lib.page.bodywidth-math.abs (yu); break;} yu = yu-lib.page.bodywidth} // var izquierd = (libere.bodywidth-yu) /lib.options.speed; var izquierda = 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.page.pevid); liber.page.page.page. Window.setInterval (function () {c = c+5; lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.style.marginleft)+izquierda*5)+'px'; // console.log (lib.page.domul.style.marginleft); if ((> = liB.oPseEl. parsefloat (lib.page.domul.style.marginleft)> = 0) {if (parsefloat (lib.page.domul.style.marginleft) = 0) {lib.page.domul.style.marginleft = '0px';} clearval (lib.page.page.pevid); 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);}, mover: función (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.page.intex) h/70; var hi = 0; var hi; 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) {claro (hid); lib.page.domul.style.marginft = -(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);} 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.page.ishom = true; if ((liber 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.inertbefore (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 ++;} más 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.prototipo = {{{ función (arg) {para (var i en this.options) {this.options [i] = arg [i]! == Undefined? arg [i]: this.options [i];} if (! dispositivo) {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);}, f alse); w.addeventListener (this.eventname.Touchmove, function (evento) {lib.event.handleevent.call (lib, event, lib);}, falso); w.ad DeventListener (this.eventName.Touchend, function (event) {lib.event.handleevent.call (lib, event, lib);}, false); w.addeventListener ('resize', function () {lib.init ();}, falso);}, init: function () {this.page.bodywidth; 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'; para (var i = 0; i <this.page.lilist.length; i ++) {var item = this.page.lilist [i]; var img = item.getElementsByTagName ('img') [0]; item.setTtribute ('index', i); item.style.width = this.page.bodywidth+'px'; imgg.StyweDth = this.page.bodywidth+'px';} if (this.page.lilist.length <3) {var longitud = this.page.lilist.length; if (longitud == 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 <longitud; i ++) {this.page.domul.appendChild (this.page.lilist [i] .clonenode (true));}} this.page.lilist = = this.options.dom.getElementsBytagName ('li'); }}, posición: 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);}, inicio: función (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 = newe WapiMage ();}; (function () {if (d.body) {loaded ();} else {if (d.adDeventListener) {d.adDeventListener ('domContentLoaded', function () {d.removeeventListener ('domContententLOdLOAD', argumentos.callee, falso); if (d.attachevent) {d.attachevent ('onreadystateStateChange', function () {if (dreadyState === 'completo') {d.Detachevent ('onreadyStateChange', arguments.callee); cargado ();}});}}}) ();}}) ();}) (Window, no viene. = function () {var obj = {dom: document.getElementById ('waplistimage'), isUpdate: true, time: 3000, isfor: true, leftOrright: 'left', callback: function (obj) {var span = document.getElementById ('wapListImage'). 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); w.wapiMage (); // img.start (obj);} </script> </body> </html>uso:
Después de que se complete la carga de la página
var obj = {dom: document.getElementById ('wapListImage'), // DOM Element IsUpdate: true, // ¿Es una hora conmutada automáticamente: 3000, // La hora de la conmutación automática de cambio automática es para: verdadero, // está en bucle, es decir, si se transfiere directamente a la primera imagen a la última imagen, o para transferir directamente la última imagen a la primera imagen de izquierda? Continción izquierda o automática en la devolución de llamada derecha: function (obj) {// Después del interruptor correctamente, la función de devolución de llamada en realidad tiene el parámetro de índice a la imagen actual // manejarlo usted mismo var span = document.getElementById ('waplistimage'). 0; k <span.length; k ++) {span [k] .className = '' ';} span [obj.index-1] .classname =' seleccionado '// console.log (obj.index)}}; wapimage.start (obj); wapimage.position (2)Si uno no necesita múltiples efectos de conmutación de imagen, puede encontrar var cargado = function () en el código.
Defina el número de imágenes que necesita para cambiar y establecer el nombre
como
w.wapimage = new WapImage ();
w.wapImages = new Wapimage ();
Puede llamarlo directamente después de cargar la página
Wapimage.start () y wapimages.start ()