Il existe de nombreux exemples de ce type sur Internet, mais ils utilisent tous d'autres composants pour rendre le code déroutant; Il y a aussi l'utilisation de la transformation dans CSS3: traduire (x, y); Éléments mobiles, mais j'ai constaté que cela était fait sur des appareils qui ne prennent pas en charge CSS3. Tout le monde a décidé d'en faire un seul, mais ils ont eu beaucoup de problèmes. Le plus important était de lier l'image. Les barres de défilement de haut en bas dans la page Web ne peuvent pas faire défiler lors de la glissement de l'image, et elle n'est pas compatible avec la glissement sur la machine PC. Ici, je présenterai brièvement les problèmes rencontrés et les solutions;
Question 1: Après avoir ajouté un lien à l'image, vous passez toujours à d'autres pages lors de la traînée;
La raison principale du problème est qu'il est impossible de déterminer s'il faut cliquer ou faire glisser. L'ordre général des événements de téléphonie mobile est Touchstart-》 Mousedown-》 MouseMove-》 MouseUp-》 Touchend-》 Cliquez. Cela peut varier en fonction du téléphone. TouchStart -》 TouchMove -》 Touchend -》 L'événement de clic est exécuté en dernier. Lorsque nous avons Touchstart, TouchMove, Touchend et Touchend, si nous ne retournons pas ou n'annuons pas la valeur par défaut, l'événement Click sera déclenché, de sorte que la page Web sautera. La solution consiste à enregistrer les points de coordonnées de Touchstart et de TouchMove, et de calculer si le contact s'est déplacé en fonction des deux points de coordonnées. Parmi eux, ce qui vaut la peine de prêter attention, ce sont les paramètres de l'événement de l'événement. L'écran tactile est généralement event.touches, event.targetTouches, event.changedTouches. J'ai trouvé les valeurs des trois paramètres du test. Cependant, il convient de noter que l'événement Touchend n'obtiendra pas les coordonnées de contact (ou peut-être un problème d'appareil). TouchMove continuera de partir lors du déménagement. Parfois, Touchmove ne se déclenche pas. Le navigateur est livré avec une fonction pour supprimer le contact (ou souris) de l'élément sélectionné. Par exemple, l'appuyer et le maintenir à temps apparaîtra (l'image sur le PC générera une vignette traînée). De cette façon, Event.PreventDefault (); Annulez la valeur par défaut lorsque TouchStart (Mousedown).
Question 2: Les barres de défilement de haut en bas dans la page Web ne peuvent pas faire défiler lors de la glissement de l'image;
Je crois que ce problème sera rencontré tant que cela sera fait. En fait, l'événement par défaut.PreventDefault () est annulé lors du déplacement (TouchMove, MouseMove). Ce que nous devons faire ici, c'est si les contacts sont déplacés et si les contacts au début sont cohérents. S'ils sont cohérents, ils reviendront directement. Il doit également calculer si l'axe x est un peu plus déplacé ou si l'axe y est un peu plus déplacé. De cette façon, nous pouvons annuler la valeur par défaut lors du glissement à gauche et à droite, et ne pas l'annuler lorsque vous allez à l'école;
Question 3: Et ce n'est pas compatible avec la glisser sur la machine PC
En effet, lors des événements de liaison, vous ne pouvez pas pleinement déterminer si le nom de l'événement est Touchstart ou Mousedown. J'ai cherché en ligne et j'ai senti que je ne l'ai pas fait, alors je l'ai copié directement.
this.eventName = {TouchStart: 'Touchstart', TouchMove: 'TouchMove', Touchend: 'Touchend',}Rendre un jugement
if (! Device) {this.eventName.touchstart = 'Mousedown'; this.eventName.touchmove = 'MouseMove'; this.eventName.Touchend = 'MouseUp';}dom.addeventListener (this.eventname.touchstart, handleevent, false);
C'est probablement ce que signifie lier différents événements en fonction de différents appareils.
En fait, j'ai rencontré de nombreux problèmes, donc je ne les expliquerai pas un par un
Je ne dirai pas grand-chose, publiez simplement le code. S'il y a quelque chose de mauvais, veuillez inclure et donner plus d'opinions
<! doctype html> <html> <éadf> <meta charset = "utf-8"> <meta contenu = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no" name = "Viewport" /> <meta contenu = "oui" name = "Apple-mobile-web-appaspable" / meta = "Black =" Apple-mobile-web-appascable " name = "Apple-mobile-web-app-statu-bar-style" /> <meta tenty = "téléphone = no" name = "format-detection" /> <itle> </ title> <style type = "text / css"> html, body, * {margin: 0; rembourrage: 0; Border: 0;} # wapListImage1, #WapListImage {width: 100%; débordement: caché; Hauteur: Auto; curseur: déplacer; Zoom: 1; Position: relative;} # wapListImage1 ul, # wapListImage1 ul li, # wapListImage1 ul, # wapListImage ul li {list-style: Aucun;} # wapListImage1 ul, #wapListImage ul {width: 99999px;} # waplistImage1 ul li, #waplistImage ul li # wapListliage1 ul li, #waplistImage ul li #} # waPLestimage ul li, #wapListlimage ul li #} # WAPLISIMA 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: absolue; En bas: 10px; Droite: 0;} # wapListImage dl span {overflow: Hidden; width: 10px; hauteur: 10px; Color en arrière-plan: # 900; Affichage: bloc en ligne;} # wapListImage dl span.Selected {background-color: # 000;} </ style> </ head> <body> <div id = "k"> <div id = "wapListImage"> <ul> <li> <a href = "javascrip nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "hrefto =" ddd "cible =" _ noir "> <img src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javascrip rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollo src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuuxuwq66.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javascript: Void (0)" rel = "exteral Nof =" javascrip nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" external nofollo src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrXe2po83.gonglve.w690.jpeg"> </a> </ li> <! - <li> <a href = "javascrip rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollo hrefto = "ddd" target = "_ noir"> <img src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> href = "JavaScript: void (0)" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollower" rel = "external nofollow =" rel = "external" external "rel =" external nofollow = "rel =" external nofollow rel = "externe nofollow" rel = "externe nofollow" hrefto = "ddd"> <img src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuuxuwq66.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javascript: Void (0)" rel = "exteral Nof =" javascrip nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollo src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrXe2po83.gonglve.w690.jpeg"> </pan> </ li> -> </ul> <dl> <pan> 1 </pan> <pan tende> <span> 4 </span> <span> 5 </span> <span> <span> 6 </span> -> </dl> </div> <div style = "height: 200px;"> </div> <div id = "wapListImage1"> <ul> <li> <a href = "javascript: void (0)" rel = "external nofollow nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" external nofollo src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javascrip rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollo src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuuxuwq66.gonglve.w690.jpeg"> </a> </li> <li> <a href = "javascript: Void (0)" rel = "exteral Nof =" javascrip nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollo src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrXe2po83.gonglve.w690.jpeg"> </a> </li> </ul> </v> <script type = "text / javascrip (/ Android | webOS | iPhone | iPad | iPod | BlackBerry | iemobile | Opera mini / i.test (Navigator.UserAgent.tolowerCase ()); fonction wapimage () {this.options = {dom: null, vitesse: 200, iSupdate: true, time: 3000, LeftorRright: 'Left', isfor: false, rappel: 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, list: null, index: index: 0, drapeau: false, stime: 0, etime: 0, isown: false, mleft: 0, back: 30, MoveId: [], nextId: null, preved: null, isdom: false}, this.event = {handleEvent: function (event, lib) {event = event? événement: window.event; // console.log (event.type) switch (event.type) {case "touchstart": var touch = event.touches [0]; case "MousDown": 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 = touche.pagex; lib.page.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 "mousmove": if (! lib.page.isdown) return; if (event.type == "mousemove") {touch = event;} lib.point.pagex2 = touche.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)) {// les événements gauche et gauche 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.Marginlefle = - (lib.page.list.length-1) * lib.page.bodywidth + 'px'; lib.page.mleft = - (lib.page.list.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)) {// événements de haut en bas} else {// appuyez sur ou cliquez sur ou cliquez sur} casser; case "soup": 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)) {// les événements gauche et gauche event.preventDefault (); lib.event.move.call (this, lib);} else if (math.abs (changey)> math.abs (changex)) {// events up and down lib.event.move.call (this, lib);} else {// long press {// Long Press} else {// cliquez si a.getAttribute ('Target') == 'objet') {w.location = a.getAttribute ('hrefto')} else {w.open (a.getAttribute ('hrefto'));}}}} lib.page.isdown = false; break: break 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.bodybody) + 'px'; lib.page.index = index-1;} lib.options.callback ({"index": parseInt (lib.page.list [lib.page.index] .getAttribute ('index')) + 1});} else {if (index == Undefined) {lib.page.domul.style.Marginleft) {lib.page.domul.style.Marginleft) {lib.page.domul.Style.Marginleft) {lib.page.domul.style.Marginleft = UNDEFINE -lib.page.bodywidth + 'px';} else {lib.page.domul.style.marginleft = -lib.page.bodywidth + 'px'; while (true) {if (paSeInt (index) == parseInt (lib.page.list [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.list [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.peed; 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 gauche = (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.list.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.peed || parsefloat (lib.page.domul.style.marginleft) <= - (lib.page.list.length-1) * lib.page.bodywidth ) {if (parsefloat (lib.page.domul.style.marginleft) <= - (lib.page.list.length-1) * lib.page.bodywidth) {lib.page.domul.style.marginleft = - (lib.page.list.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.dodupdate.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 Left = (lib.page.bodywidth-same.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.peed; var Left = yu / lib.options.peed; 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); parsefloat (lib.page.domul.style.marginleft)> = 0) {if (parsefloat (lib.page.domul.style.marginleft) 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.dodupdate.call (this, lib, 'l'); si (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. h / 70; var hi = 0; var hi; Hid = window.setinterval (function () {if (lib.point.pagex2> lib.point.pagex1) {lib.page.domul.style.marginleft) +'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);} sinon 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.isom = true; lib.page.list [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.list [lib. Page.list.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.list [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.list [lib.page.index] .getAttribute ('index'); lib.options.callback ({"index": parseint (index) +1}); lib.page.isdom = false;}};}; function (arg) {for (var i dans this.options) {this.options [i] = arg [i]! == Undefined? arg [i]: this.options [i];} if (! Device) {this.eventName.Touchstart = 'Mousedown'; this.eventName.Touchmove = 'MousMove'; this.eventName.touchend = 'Mouseup';} // return temp;}, liswevent: fonction () {var lib = this; this.page.domul.addeventListener (this.eventname.touchstart, fonction (événement) {lib.event.handleevent.call (lib, événement, lib);}, f alse); w.addeventListener (this.eventname.touchmove, fonction (événement) {lib.event.handleEvent.call (lib, événement, lib);}, false); w.ad DeventListener (this.eventname.touchend, fonction (événement) {lib.event.handleevent.call (lib, événement, lib);}, false); w.addeventListener ('redimensi', function () {lib.init ();}, false);}, init: functionwe; this.page.list = this.options.dom.getElementsByTagName ('li'); this.page.domul = this.options.dom.getElementsByTagname ('ul') [0]; this.options.dom.style.width = this.page.bodywidth + 'px'; pour (var (var i = 0; i <this.page.list.length; i ++) {var item = this.page.list [i]; var img = item.getElementsByTagName ('iMg') [0]; item.settribute ('index', i); item.style.width = this.page.bodywidth + 'px'; img.style = this.page.bodywidth + 'px';} if (this.page.list.length <3) {var longueur = this.page.list.length; if (longueur == 1) {this.page.domul.appendChild (this.page.lilist [0] .clonenode (true)); this.page.domul.appendChild (this.page.list [0] .clonenode (true));} else {for (var i = 0; i <longueur; i ++) {this.page.domul.appendChild (this.page.lilist [i] .clonenode (true));}} this.page.lilist = this.options.dom.getElementsByTagName ('li'); }}, position: fonction (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 chargé = function () {w.wapimage = new wapimage (); w.wapimages = new WapImage ();}; (function () {if (d.body) {chargé ();} else {if (d.addeventListener) {d.addeventListener ('domContentloaded', function () {d.removeeventListed ();}, false);} if (d.attachevent) {d.attachevent ('onreadystatechange', function () {if (d.readystate === 'complete') {d.detachevent ('onreadystatechange', arguments.callee); chargé ();}});}}}) ();}) (fenêtre, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document, document " obj = {dom: document.getElementById ('wapListImage'), ISUPDate: true, time: 3000, isfor: true, LeftorRright: 'Left', callback: function (obj) {var span = document.getElementById ('wapListImage'). GetElementsByTagName ('dl') [0] .tgetElelement 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 = {doment: document.getElement1 rappel: function (obj) {// console.log (obj.index)}}; wapimages.start (obj2); // var img = new w.wapimage (); // img.start (obj);} </ script> </ body> </ html>usage:
Une fois le chargement de page terminé
var obj = {dom: document.getElementById ('wapListImage'), // dom Element isUpdate: true, // est-il automatiquement changé: 3000, // le temps de la commutation automatique est for: true, // est-il enroulé, c'est-à-dire s'il est directement transféré vers la première image vers la dernière image, ou à transférer directement vers la première image Leftorright: 'Left', out AIME AIME sur la première image de gauche Commutation gauche ou automatique sur le rappel droit: fonction (obj) {// Après le commutateur avec succès, la fonction de rappel a en fait le paramètre d'index à l'image actuelle // le gérer vous-même var span = document.getElementById ('wapListImage'). GetElementByTagname ('DL') [0] .TetenSelementsByTagname ('Span'); pour (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)Si l'on n'a pas besoin de plusieurs effets de commutation d'image, vous pouvez trouver var chargé = fonction () dans le code.
Définissez le nombre d'images dont vous avez besoin pour changer et définir le nom
comme
w.wapImage = new wapImage ();
w.wapimages = new wapImage ();
Vous pouvez l'appeler directement après le chargement de la page
Wapimage.start () et wapimages.start ()