Existem muitos exemplos na Internet, mas todos usam outros componentes para tornar o código confuso; Há também o uso de transformação no CSS3: tradução (x, y); Elementos móveis, mas achei que era feito em dispositivos que não suportam o CSS3. Todos decidiram fazer um sozinhos, mas tiveram muitos problemas. O mais importante foi vincular a imagem. As barras de rolagem para cima e para baixo na página da web não podem rolar ao arrastar a imagem e não é compatível com o arrasto na máquina PC. Aqui, apresentarei brevemente os problemas encontrados e soluções;
Pergunta 1: Depois de adicionar um link à imagem, você sempre pulará para outras páginas ao arrastar;
O principal motivo do problema é que é impossível determinar se o clique ou arrasta. A ordem geral dos eventos de telefone celular é o toque-mousedown-》 mousemove-》 mouseup-》 toukend-》 clique. Pode variar dependendo do telefone. TouchStart -》 Touchmove -》 Toukend -》 Clique em Evento é executado por último. Quando tivermos o processo TouchStart, Touchmove, Toukend e Toukend, se não retornarmos ou cancelarmos o padrão, o evento de clique será acionado, para que a página da web pule. A solução é registrar os pontos de coordenadas do Touchstart e do Touchmove e calcular se o contato passou com base nos dois pontos de coordenadas. Entre eles, o que vale a pena prestar atenção são os parâmetros do evento do evento. A tela de toque geralmente é event.Touches, Event.TargetTouches, Event.ChangedTouches. Encontrei os valores dos três parâmetros no teste. No entanto, vale a pena notar que o evento Toukend não receberá as coordenadas de contato (ou talvez um problema de dispositivo). O Touchmove continuará a partir ao se mover. Às vezes, o Touchmove não é acionado. O navegador vem com uma função para remover o contato (ou mouse) do elemento selecionado. Por exemplo, pressioná -lo e segurá -lo no tempo aparecerá (a imagem no PC gerará uma miniatura arrastada). Dessa forma, event.preventDefault (); Cancele o padrão quando o Touchstart (Mousedown).
Pergunta 2: As barras de rolagem para cima e para baixo na página da web não podem rolar ao arrastar a imagem;
Acredito que esse problema será encontrado enquanto for feito. De fato, o evento padrão.preventDefault () é cancelado ao se mover (Touchmove, MouseMove). O que precisamos fazer aqui é se os contatos são movidos e se os contatos no início são consistentes. Se forem consistentes, retornarão diretamente. Ele também precisa calcular se o eixo x é movido um pouco mais ou o eixo y é movido um pouco mais. Dessa forma, podemos cancelar o padrão ao deslizar para a esquerda e para a direita, e não cancelá -lo ao ir para a escola;
Pergunta 3: e não é compatível com o arrasto na máquina PC
Isso ocorre porque, ao vincular eventos, você não pode considerar completamente se o nome do evento é TouchStart ou Mousedown. Eu procurei on -line e senti que não o fiz, então copiei diretamente.
this.eventName = {touchstart: 'touchstart', touchmove: 'touchmove', thequend: 'thekend',}Fazendo julgamento
if (! dispositivo) {this.eventName.tuouchstart = 'mousedown'; this.eventName.TouchMove = 'mousemove'; this.eventName.Touchend = 'mouseup';}dom.addeventListener (this.eventName.TouchStart, handleEvent, false);
Provavelmente é isso que significa vincular eventos diferentes de acordo com diferentes dispositivos.
Na verdade, eu encontrei muitos problemas, então não vou explicar um por um por um
Não vou dizer muito, basta postar o código. Se houver algo ruim, inclua e dê mais opiniões
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta content = "width = largura do dispositivo, escala inicial = 1,0, escala máxima = 1,0, MENTOLABLE DO APLATE = NO" NOME = "Viewport" /> <-metap = "Sim" "" " name = "Apple-mobile-web-app-status-bar-estilo" /> <meta content = "telefone = no" name = "format-detection" /> <title> </title> <style type = "text /css"> html, corpo,*{margin: 0; preenchimento: 0; Border: 0;} #waplistImage1, #waplistImage {width: 100%; estouro: oculto; Altura: Auto; Cursor: Mova; zoom: 1; Posição: relativa;}#waplistImage1 ul,#waplistImage1 ul li,#waplistImage1 ul,#waplistImage ul li {list-estilo: nenhum;}#waplistImage1 ul, #waplistimage ul {uLth: 9999px;}#waplistImage Esquerda;}#waplistImage ul li a img: focus,#waplistimage ul li a img: verificado,#waplistimage ul li a img,#waplistImage ul li a img: ativo,#waplistimage ul li a,#waplistimage ul li a: ativo {cursor: {};}; Inferior: 10px; à direita: 0;}#waplistImage dl span {Overflow: hidden; largura: 10px; Altura: 10px; Background-Color: #900; Exibir: Block inline;} #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 =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "hrefto =" ddd "alvo =" _ preto "> <img src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javs = jArting" Javs = "[") Nofollow "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "hrefto =" ddd "> <img" src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaftzsuxuwq66.gonglve.w690.jpeg"> </a> </li> <li> <a href = " Nofollow "rel =" Nofollow externo "rel =" Nofollow externo "rel =" externo não src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrxe2po83.gonglVe.w690.jpeg"> </a> </li> <!- <li> <a href = "jav" jav "> </i> <! Nofollow "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "Rel =" Nofollow "Rel =" Nofollow "Rel =" "Nofollow" hrefto = "ddd" ddd "" src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javs = jArting" Javs = "[") Nofollow "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" externo não src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaftzsuxuwq66.gonglve.w690.jpeg"> </a> </li> <li> <a href = " Nofollow "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "hrefto =" ddd "> <img" src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeeabvziaawcfrxe2po83.gonglve.w690.jpeg"> </a> </li>- <pan> 4 </span> <pan> 5 </span> <pan> <pan> 6 </span> -> </dl> </div> <div style = "altura: 200px;"> </div> <div id = "waplistimage1"> <ul> <li> <a href = "javascript: n n) rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow" externo "hrefto =" ddd "" = "_ _ preto" src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javs = jArting" Javs = "[") Nofollow "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "hrefto =" ddd "> <img" src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaftzsuxuwq66.gonglve.w690.jpeg"> </a> </li> <li> <a href = " Nofollow "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "hrefto =" ddd "> <img" src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeeabvziaawcfrxe2po83.gonglve.w690.jpeg"> </a> </li> </ul> </div> <script type = "" (/Android | webos | iPhone | ipad | ipod | BlackBerry | iemobile | Opera mini/i.test (Navigator.UserAgent.TolowerCase ())); função wapImage () {this.options = {dom:: NULL, SPEED: 200, ISUPDATE: TRUE, TIME: 3000, LEDORRIGHT: 'Esquerda', ISfor: False, retorno de chamada: function () {}}, this.eventName = {touchstart: 'TouchStart', Touchmove: ' touchmove ', thequend:' toukend ',}, this.point = {x: 5, y: 5, PageX1: 0, PageX2: 0, Pagey1: 0, Pagey2: 0}, this.page = {Bodywidth: 320, domul: null, lilist: null, index: 0, sinalizador: false, stime: 0, etime: 0, isdown: false, mleft: 0, volta: 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.page.isdown) Date (). Gettime (); lib.event.stop (lib, lib); if (event.type == "mousedown") {touch = event; event.preventDefault ();} lib.point.pagex1 = lib.point.pagex = touch.pagex; lib.point.pagex1 = lib.point.pagex = touch.pagex; lib.point.pagex1 = lib.point.pagex = touch.pagex; touch.pagey; lib.page.mleft = parsefloat (lib.page.domul.style.marginleft); lib.page.mleft = lib.page.mleft? lib.page.mleft: 0; quebra; 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; touch.pagey; if (lib.point.pagex1 == lib.point.pagex2) {event.preventDefault (); return false;} var altenxx = lib.point.pagex1 - lib.point.pagex2; var mudanças = lib.point.pagey1 - lib.point.pagey2; if (math.abs (alteração)> math.abs (alteração)) {// esquerda e esquerda 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)) {// Eventos para cima e para baixo} else {// Pressione ou clique em Long} Break; case "MouseUp": case "TouqueNend": if (! lib.page.isdown) retorno; lib.page.Etime = new Date (). 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 mudanças = lib.point.pagey1 - lib.point.pagey2; if (math.abs (alteração)> math.abs (alteração)) {// esquerda e esquerda event.preventDefault (); lib.event.move.call (this, lib);} else if (Math.abs (changey)> math.abs (alteração)) {// para cima e para baixo eventos lib.event.move.call (this, lib);} else {// Long Press ou se clique. {// Long Press} else {// Clique em if (event.button == 0 || event.type == 'Toukend') {var a = lib.page.lilist [lib.page.index] .getElementsByTagName ('a') [0]; if (TypeOf a.getAttribute ('Target') == 'objeto') {w.Location = a.getAttribute ('hrefto')} else {w.open (a.getAttribute ('hrefto'));}}}}} lib.page.isdown = false; break; default: break;}}, posição: function: function: function: function; lib.page.domul.style.Marginleft = -(lib.page.index*lib.page.bodywidth) +'px'; //} else {// lib.page.domul.style.marginleft = -(lib.page.page.widthththhle.px '; } if (! lib.options.isfor) {if (index == undefined) {lib.page.domul.style.marginleft = -(lib.page.index*lib.page.bodyPaMth) +'px';} {lib.page.domul.stylefleft) +'px'; lib.page.index = index-1;} lib.options.callback ({"index": parseInt (lib.page.lilist [lib.page.index] .getAttribute ('index')) +1};} {if (index ==.Merfinat.M) -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.insertfore (lib.page.lilist [lib.page. lilist.length-1], lib.page.lilist [0]);}} lib.options.Callback ({"index": parseint (lib.page.lilist [1] .getAttribute ('index'))+1}); i = 0; i <lib.page.moveid.length; i ++) {clearInterval (lib.page.moveId [i]);} lib.page.moveId = [];}, start: function.b) {if (lib.options.isupdate) {lib.page.Move.Moves [MoMID) {if (lib.options.isupdate) {lib.page.Move.Moves [mId) {se setInterval (function () {if (lib.options.leftorright == 'left') {lib.event.next (lib, lib);} else {lib.event.prev (lib, lib);}}, lib.options.time);}}, seguinte: função (lib) {lib); console.log (lib.page.previd.length+"nextId") // para (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 esquerd = (lib.page.bodywidth-math.abs (lib.point.pagex1-lib.point.pagex2))/lib.options.options.options. 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 deixado = (lib.page.bodywidth-math.abs (parsefloat (lib.page.domul.style.marginleft)%lib.page.bodywidth))/lib.options.speed; var esquerdo = 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.setVal (function) {// lib.event.stop (lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, lib, liB, liB, liB, liB, LIB.B. 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.lngthen-1)*lib.page.wid.wild.wild) ) {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.Next [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.NextId; lib.page.NextId = []; // var esquerdo = (lib.page.bodywidth-math.abs (lib.point.pagex1-lib.point.pagex2))/lib.options.speed; // var esquerdo = (lib.page.bodywidth-math.abs (parsefloat (lib.page.domul.style.marginleft)%lib.page.bodywidth))/lib.options.speed; // var esquerdo = (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.th.th) if (yu <0) {yu = lib.page.bodywidth-math.abs (yu); quebra;} yu = yu-lib.page.bodywidth} // var esquerd = (lib.page.bodywidth---b) /lib.options.speed; var esquerdo = 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.Page.PAGE.PAGE.DOMUR); window.setInterval (function () {c = c+5; lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.style.marginleft)+esquerda*5)+'px'; // console.log (lib.page.page.botsylefle.marlEftle.MarlEftLeft.MarlEftleftleftleftLeftleftleftleftleftLeftleftleftleftleftleftlefl)+'px'; parsefloat (lib.page.domul.style.marginleft)> = 0) {if (parsefloat (lib.page.domul.style.marginleft)> = 0) {lib.page.domul.style.MarginLeft = '0px'; 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: 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 hi; hid = window.setInterVal (function () {if (lib.point.pagex2> lib.point.pagex1) {lib.page.domul.style.marginleft = (parsefloat (lib.page.dom). + '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.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.isd); lib.page.lilist [lib.page.index] .getAttribute ('index'); lib.options.callback ({"index": parseInt (index) +1}); lib.page.iSert.InserTwer; return;} if (type == 'l') {lib.page.Ing.InsertBe 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 ";};}; function (arg) {for (var i n this.options) {this.options [i] = arg [i]! == indefinido? arg [i]: this.options [i];} if (! dispositivo) {this.eventName.TouchStart = 'mousedown'; this.eventName.TouchMove = 'mouseMove'; this.eventName.Touchend = 'mouseUp';} // Return Temp;}, bindEvent: function () this.page.domul.addeventListener (this.eventName.TouchStart, function (event) {lib.event.handleevent.call (lib, event, lib);}, f alse); w.AddeventListener (this.eventName.TouchMove, function (event) {lib.event.handleevent.call (lib, event, lib);}, false); w.ad DeventListener (this.EventName.Tohend, function (event) {lib.event.handleevent.call (lib, event, lib);}, false); w.addeventListener ('REMENTEMENTE', functodo. this.page.lilist = this.options.dom.getElementsByTagName ('li'); this.page.domul = this.options.dom.getElementsByTagName ('ul') [0]; this.options.dom.style.WidthThThThth.Page.BodyWidth+'PX'; para (vars i = 0; i <this.page.lilist.length; i ++) {var item = this.page.lilist [i]; var iMg = item.getElementsByTagName ('img') [0]; item.setAttribute ('index', i); ppyle.widthththth.page.bodywid ('index', i); 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] .conenode (true));} this.options.dom.getElementsByTagName ('li'); }}. function (arg) {this.setOption (arg); this.init (); this.Position (); this.Bindevent (); this.Event.domupdate (this, 'l'); this.event.start (this);}}; var carga = function () {w.wapimage = new WapImage ();}; (function () {if (d.body) {carregou ();} else {if (d.addeventListener) {d.addeventListener ('domcontentLoaded', FUNCLUMED () {D.RemoveEventListener ('DomContentLoaded', FURCLUNTEM.CALLEEEEE, FUSMEDENED) {D.RemoveEnTener ('DomContentOled', argument.calleeeeeee, falha); if (d.Attachevent) {D.Attachevent ('oNREADESTATECHANGE', function () {if (D.ReadyState === 'Complete') {d.Detachevent ('oNreadyStatechange', argumentos.callee); carreged ();}};}}}}) (); {Dom: document.getElementById ('waplistImage'), isupdate: true, tempo: 3000, ISfor: true, esquerdorright: 'esquerda', retorno de chamada: function (obj) {var span = document.getElementById ('waplistimage'). 0; k <span.length; k ++) {span [k] .className = '';} span [obj.index-1] .className = 'selected' // console.log (obj.index)}}; retorno de chamada: function (obj) {// console.log (obj.index)}}; wapimages.start (obj2); // var iMg = new w.wapimage (); // img.start (obj);} </cript> </body> </tiodsl>uso:
Após o carregamento da página estar completo
var obj = {dom:document.getElementById('wapListImage'), //dom element isupdate:true, //Is it automatically switched time:3000, //The time of automatic switching isfor:true, //Is it looped, that is, whether to directly transfer to the first picture to the last picture, or to directly transfer to the last picture to the first picture leftOrright:'left', //Is it like automatic switching on A lança esquerda ou automática no retorno de chamada certo: function (obj) {// Após o interruptor com sucesso, a função de retorno de chamada realmente possui o parâmetro de índice para a imagem atual // lide -o você mesmo var span = document.getElementById ('waplistImage'). getElementsByTagname ('dl) [0]. 0; k <span.length; k ++) {span [k] .className = '';} span [obj.index-1] .className = 'selected' // console.log (obj.index)}}}; wapimage.start (obj); wapimage.position (2)Se não for necessário vários efeitos de comutação de imagem, você poderá encontrar vareaded = function () no código.
Defina o número de fotos que você precisa alternar e definir o nome
como
w.wapImage = new wapimage ();
w.wapImages = new wapimage ();
Você pode ligar diretamente depois que a página é carregada
Wapimage.start () e wapimages.start ()