Es gibt viele solche Beispiele im Internet, aber alle verwenden andere Komponenten, um den Code verwirrend zu machen. Es gibt auch die Verwendung der Transformation in CSS3: Translate (x, y); Mobile Elemente, aber ich stellte fest, dass es fast auf Geräten durchgeführt wurde, die CSS3 nicht unterstützen, und ich habe mich entschlossen, selbst einen zu machen. Unerwartet treten viele Probleme auf. Das Wichtigste ist, das Bild zu verknüpfen. Die Auf- und Ablauf -Scroll -Balken auf der Webseite können beim Ziehen des Bildes nicht scrollen, und es ist nicht mit dem Ziehen des PC -Computers kompatibel. Hier werde ich kurz die Probleme und Lösungen einführen.
Frage 1: Nach dem Hinzufügen eines Links zum Bild springt es beim Ziehen immer auf andere Seiten
Der Hauptgrund für das Problem ist, dass es unmöglich ist zu bestimmen, ob Sie klicken oder ziehen sollen. Die allgemeine Reihenfolge der Mobiltelefonveranstaltungen ist TouchStart-》 MouseDown-》 Mousemove-》 Mausup-》 Touchend-》 Klicken. Es kann je nach Telefon variieren. TouchStart -》 Touchmove -》 Touchend -》 Klicken Sie zuletzt ausgeführt. Wenn wir TouchStart, Touchmove, Touchend und Touchend -Prozess haben, wird das Standard -Ereignis ausgelöst, sodass die Standardseite nicht zurückgeführt oder absagt, sodass die Webseite wegspringt. Die Lösung besteht darin, die Koordinatenpunkte von Touchstart und Touchmove aufzuzeichnen und zu berechnen, ob sich der Kontakt basierend auf den beiden Koordinatenpunkten durchgesetzt hat. Unter ihnen ist die Ereignisparameter des Ereignisses unter ihnen zu achten. Der Touchscreen ist im Allgemeinen Event.Touches, Event.targettouches, Event.ChangedTouches. Ich fand die Werte der drei Parameter im Test. Es ist jedoch erwähnenswert, dass das Touchend -Ereignis nicht die Kontaktkoordinaten (oder möglicherweise ein Geräteproblem) erhält. TouchMove wird sich beim Umzug weiterhin auf den Weg machen. Manchmal löst Touchmove nicht aus. Der Browser wird mit einer Funktion geliefert, um den Kontakt (oder die Maus) aus dem ausgewählten Element zu entfernen. Zum Beispiel wird das Drücken und Halten pünktlich angezeigt (das Bild auf dem PC erzeugt eine schleppte Miniaturansicht). Auf diese Weise Ereignis.PreventDefault (); Die Standardeinstellung beim Touchstart (MouseDown) abbrechen.
Frage 2: Die Auf- und Ablauf -Scroll -Balken auf der Webseite können beim Ziehen des Bildes nicht scrollen
Ich glaube, dass dieses Problem so lange auftreten wird, wie es getan ist. Tatsächlich wird das Standard -Ereignis. Was wir hier tun müssen, ist, ob die Kontakte bewegt werden und ob die Kontakte mit dem Anfang übereinstimmen. Wenn sie konsistent sind, kehren sie direkt zurück. Es muss auch berechnen, ob die X-Achse etwas mehr bewegt wird oder die y-Achse etwas mehr bewegt wird. Auf diese Weise können wir den Standard abbrechen, wenn wir nach links und rechts rutschen, und ihn beim Schulbesuch nicht absagen.
Frage 3: Und es ist nicht mit dem Ziehen auf dem PC -Computer kompatibel
Dies liegt daran, dass Sie bei der Bindung von Ereignissen nicht vollständig überlegen, ob der Ereignisname Touchstart oder MouseDown ist. Ich habe online gesucht und hatte das Gefühl, dass ich es nicht getan habe, also habe ich es direkt kopiert.
this.eventname = {touchStart: 'touchstart', touchmove: 'touchmove', touchend: 'touchend',} füllt Urteile if (! device) {this.eventname.touchstart = 'MouseDown'; this.eventname.touchmove = 'Mousemove';Dies ist wahrscheinlich das, was es bedeutet, verschiedene Ereignisse nach verschiedenen Geräten zu binden.
Eigentlich bin ich auf viele Probleme gestoßen, deshalb werde ich sie nicht nacheinander erklären
Ich werde nicht viel sagen, nur den Code posten. Wenn es etwas Schlimmes gibt, geben Sie bitte mehr Meinungen ein und geben Sie mehr Meinungen ein
<! docType html> <html> <head> <meta charset = "utf-8"> <meta content = "width = Gerätebreite, initial-scale = 1,0, maximal scale = 1,0, user-scalable = no" name = "Ansichtsport" /> <meta-content = "appa" -Name = "Apple-scalable". name = "Apple-Mobile-Web-App-status-Bar-Stil" /> <meta content = "telefon = no" name = "format-detektion" /> <title> < /title> <style type = "text /css"> html, body,*{margin: 0; Polsterung: 0; Rand: 0;} #WAPListImage1, #WapListImage {Breite: 100%; Überlauf: versteckt; Höhe: Auto; Cursor: Bewegung; 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: Fokus,#WAPListImage ul li a IMG: geprüft,#WaplistImage ul li a IMG,#WapListImage ul li a IMG: Active,#WapListimage ul Li a,#Waplistimage ul li a: aktiv {curSor: Bewegung;}#Waplistimage dl {Position: Absolute: Absolute; unten: 10px; Rechts: 0;}#WAPListImage DL span {Überlauf: versteckt; Breite: 10px; Höhe: 10px; Hintergrundfarbe: #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 =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" externe nofollow "rel =" external nofollow "hrefto =" ddd "target =" _ schwarz "> <imgofollow" src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </li> <li> <a href = "javaScript: void (0)" " rel = "externer nofollow" rel = "external nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "external nofollow" rel = "externe noFoxus" rel = "external nofollow" hrefto = " src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftZSuxuwq66.gonglve.w690.jpeg" nofollow "rel =" externer nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" external nofollow "rel =" externe noflowlow "rel =" external noxurox "hrefto =" src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrxe2po83.gonglve.w690.jpeg"> </a> </li> <! rel = "externer nofollow" rel = "externer nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe noFoflo -rel =" externe noforlowlown "rel =" extern "rel =" rel = "rel =" rel = "rel =" rel- 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" rel="external nofollow" rel = "externer nofollow" rel = "externe nofollow" hrefto = "ddd"> <img src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftZSuxuwq66.gonglve.w690.jpeg" nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" external nofollow "hrefto =" ddd "> <imgowl" src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrxe2po83.gonglve.w690.jpeg" <span> 4 </span> <span> 5 </span> <span> <span> 6 </span> -> </dl> </div> <div style = "Höhe: 200px;"> </div> <div id = "waplistimage1"> <ul> <li> <a href = "javascript: void (0)" relaL "relaL. nofollow "rel =" externer nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" external nOfollow "rel =" externe nofollow "rel =" external nOflowlow "rel =" external nofolhold "rel =" externe nofloxox rel = "external nouglowlowfollowfollown" tonowlowd "-Regel" tonowlow ". src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </li> <li> <a href = "javaScript: void (0)" " rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "externe nOFOWL" hrefto = "ddd"> <img "> <img"> <img "> <img src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftZSuxuwq66.gonglve.w690.jpeg" nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" external nofollow "hrefto =" ddd "> <imgowl" src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrxe2po83.gonglve.w690.jpeg" (/Android | webOS | iPhone | iPad | iPod | Blackberry | Iemobile | Opera mini/i.test (Navigator.Useragent.tolowerCase ()); Funktion Wapimage () {this.options = {Dom: NULL, Geschwindigkeit: 200, IsUpdate: TRUE, Zeit: 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, flilist: null, null, Index: 0, Flag: False, Stime: 0, Etime: 0, isdown: false, mleft: 0, zurück: 30, moveId: [], nextId: null, previd: null, isdom: false}, this.event = {HandleEvent: function (Ereignis (Ereignis) {Ereignis = Ereignis? Ereignis: window.event; // console.log (Ereignis.Type) Switch (Event.Type) {case "touchStart": var touch = event.touches [0]; case "mousedown": if (lib.page.isdown) return; lib.page.isdown = true; 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]; Fall "Mousemove": if (! lib.page.isdown) return; if (Ereignis.Type == "MousEmove") {touchs; 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.absx)> math.abs (Changey)) {// linke und linke Ereignisereignisse.PreventDault (); lib.page.domul.style.marginleft = lib.page.mleft-whangex+'px'; if (parsefloat (lib.page.domul.style.Marginleft) <=-(lib.page.lilist.Length-1)*lib.Bodywidth) -(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)) {// nach oben und nach unten} else {// Long Press oder Click} break; case "mouseUp": case "touchend": if (! lib.page.isdown) return; 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 changey = lib.point.pagey1 - lib.point.pagey2; if (math.abs (changex)> math.abs (Changey)) {// linke und linke Ereignisse links, Ereignisse links. 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 press or click if((lib.page.eTime - lib.page.sTime) > 300) Oder A.GetAttribute ('Ziel') == 'Objekt') {W.Location = A.getAttribute ('hrefto')} else {w.open (a.getAttribute ('hrefto');}}}} lib.page.isdown = false; if (index == undefiniert) {// lib.page.domul.style.marginleft = -(lib.page.index*lib.page.bodywidth) +'px'; //} else {// lib.page.domul.style.marginLeft = -(index*lib.body.bodywidth) +'; lib.page.index = index; //} if (! lib.options.isisr) {if (index == undefined) {lib.page.domul.style.Margonleft = -(lib.page.index*lib.page.bodywidth) +'px';} sonst {lib.page.domul.style.style.styly.style -((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}); -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.Page.Page.Page.Page.Page.Page.MoveId.Move.Move.MoveIns [lib.Page.Page. setInterval (function () {if (lib.options.leftorright == 'links') {lib.event.next (lib, lib);} else {lib.event.prev (lib. lib);}}, lib.options.time);}}, nächstes: Funktion (lib) {// // // // // // // // /// console.log (lib.page.previd.length+"nextid") // für (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 links = (lib.page.bodywidth-math.abs (lib.Point.Pagex1-lib.point.page.pagex2))/lib.opions.speed; 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 links = (lib.page.bodywidth-math.abs (Parsefloat (lib.page.domul.style.Marginleft)%lib.page.bodywidth))/lib.options.speed; var links = yu/lib.options.speed; var c = 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 (libop (libop); if (lib.page.moveId == null) {// clearInterval (id); //} c = c+5; lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.style.Marginleft) -Left*5)+'; 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.body.body.bodywidth.Bodywidthth.Bodywidthth.Bodywidththth.Bodywidthth ) {if (parsefloat (lib.page.domul.style.Marginleft) <= -(lib.page.lilist.length -1)*lib.page.bodywidth) {lib.page.domul.style.Marginleft = -, 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") // für (var n = 0; n = lib.page.nextid.length; n ++) {// // ClearInterval (lib.Page.NextId [0]); //} clearinterval (lib.Page.Next); lib.page.nextid = []; // var links = (lib.page.bodywidth-math.abs (lib.point.pagex1-lib.point.pagex2))/lib.options.speed; // var links = (lib.page.bodywidth-math.abs (parsefloat (lib.page.domul.style.marginleft)%lib.page.bodywidth))/lib.options.speed; // var links = (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 (wahr) {if (yu == 0) {yu = lib.page if (yu <0) {yu = lib.page.bodywidth-math.abs (yu); break;} yu = yu-lib.page.bodywidth} // var links = (lib.page.bodywidth-yu) /lib.options.speed; var links = yu/lib.options.speed; var c = 0, id; if (lib.page.index == 0) {lib.page.flag = false;} var ml = parsefloat (lib.page.domul.style.Marginleft); Clearinterval (lib.Page.page.page.page) window.setInterval (function () {c = c+5; lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.Style.Marginleft)+links*5)+'px'; // console.log (lib.page.domuse.style.style.style.style.style.style.style.style.style.Style.Style.Style. 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);}, Bewegung: Funktion (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 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.Margonft) - h*5) - h*5) - h*5) - h*5) - 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); zurück; if (lib.point.pagex2-lib.point.pagex1> 0) {// console.log ("===") lib.event.prev.call (this, lib);}}, DomUpdate: function (lib. if. options.isdo. 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.Margonleft = -lib.page.bodywidth+' px '; // (parsefloat (lib.page.domul.style.marginleft)+lib.page.bodywidth)+' px '; // lib.page.index-;} lib.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: Funktion (arg) {für (var i in this.options) {this.options [i] = arg [i]! == undefiniert? arg [i]: this.options [i];} if (! device) {this.eventname.touchstart = 'MouseDown'; this.eventname.touchmove = 'Mousemove'; this.page.domul.addeventListener (this.eventname.touchstart, Funktion (Ereignis) {lib.event.handleEvent.call (lib, Ereignis, lib);}, f Alse); deventListener (this.eventname.touchend, function (Ereignis) {lib.event.handleEvent.call (lib, Ereignis, lib);}, false); this.page.lilist = this.options.dom.GetElementsByTagName ('li'); this.page.domul = this.Options.dom.getElementsByTagName ('ul') [0]; this.options.dom.style.width i = 0; i <this.page.lilist.length; i ++) {var item = this.page.lilist [i]; var img = item.getElementsByTagname ('img') [0]; item.setAttribute ('Index', i); this.page.bodywidth+'px';} if (this.page.lilist.length <3) {var length = this.page.lilist.length; if (Länge == 1) {this.Page.domul.appendchild (this.Page.lilist [0] .clonenode (true (true)); this.page.domul.appendChild (this.page.lilist [0] .Clonenode (true));} else {for (var i = 0; i <länge; i ++) {this.page.domul.Appendchild (this.page.lilist [i] .clonenode (true);}}}}}} this.page.page = this.options.dom.getElementsByTagName ('li'); }}, Position: function (index) {this.event.position.call (this, this, Index);}, Weiter: function () {this.event.Next.call (this, this);}, pre: function () {this.event.prev.call (this this this);}, starten: start: Funktion (arg) {this.setoption (arg); this.init (); this.position (); this.bindEvent (); this.event.domUpdate (this, 'l'); WAPIMAGE ();}; (function () {if (d.body) {geladen ();} else {if (d.adDeventListener) {d.addeventListener ('domcontentgeladen', function () {d.RemoveEventListener ('domcontentLoded', Argumente. if (d.attachEvent) {d.attachEvent ('onReadyStatechange', function () {if (d.readyState === 'complete') {D.DetAchEvent ('OnReadyStatechange', Argumente.Callee.Callee ); loaded ();}});}}}) ();}}}) ();}) (Fenster, Dokument, undefiniert); Fenster. = document.getElementById ('WAPListImage'). console.log (obj.index)}}; wapimage.start (obj); w.wapimage (); // img.start (obj);} </script> </body> </html>Verwendung:
Nach dem Laden der Seite ist abgeschlossen
var obj = {dom: document.getElementById ('WAPListImage'), // Dom -Element Isupdate: True, // Ist es automatisch umgeschaltet Zeit: 3000, // Die Zeit des automatischen Wechsels ist ein: true, // wird auf dem ersten Bild geschoben, dh, ob das erste Bild direkt auf das letzte Bild wechseln. Links oder automatisches Switching am rechten Rückruf: Funktion (obj) {// Nach erfolgreichem Switch hat die Rückruffunktion tatsächlich den Indexparameter für das aktuelle Bild // Handeln Sie selbst Var span = document.getElementById ('WAPListImage'). 0; k <span.length; k ++) {span [k] .className = '';} span [obj.index-1] .className = 'ausgewählt' // console.log (obj.index)}};Wenn man keine Auswirkungen auf die Bildschaltung in der Bildschaltung benötigt, finden Sie im Code var laded = function ().
Definieren Sie die Anzahl der Bilder, die Sie zum Wechseln benötigen und den Namen festlegen müssen
wie
W. Wapimage = new Wapimage ();
W. Wapimages = new Wapimage ();
Sie können es direkt nach dem Laden der Seite anrufen
Wapimage.start () und wapimages.start ())