Ada banyak contoh seperti itu di internet, tetapi mereka semua menggunakan komponen lain untuk membuat kode membingungkan; Ada juga penggunaan transformasi dalam CSS3: translate (x, y); Elemen seluler, tetapi saya menemukan bahwa itu hampir dilakukan pada perangkat yang tidak mendukung CSS3, jadi saya memutuskan untuk membuatnya sendiri. Tanpa diduga, banyak masalah muncul. Yang paling penting adalah menghubungkan gambar. Bilah gulir naik dan turun di halaman web tidak dapat menggulir saat menyeret gambar, dan tidak kompatibel dengan menyeret pada mesin PC. Di sini saya akan secara singkat memperkenalkan masalah yang dihadapi dan solusi;
Pertanyaan 1: Setelah menambahkan tautan ke gambar, selalu melompat ke halaman lain saat menyeretnya
Alasan utama untuk masalah ini adalah tidak mungkin untuk menentukan apakah akan mengklik atau menyeret. Urutan umum acara ponsel adalah touchstart-》 mousedown-》 mousemove-》 mouseup-》 Touchend-》 klik. Mungkin bervariasi tergantung pada telepon. TouchStart -》 TouchMove -》 Touchend -》 Klik acara dieksekusi terakhir. Ketika kami memiliki proses TouchStart, TouchMove, Touchend, dan Touchend, jika kami tidak mengembalikan atau membatalkan default, acara klik akan dipicu, sehingga halaman web akan melompat. Solusinya adalah merekam titik koordinat TouchStart dan TouchMove, dan menghitung apakah kontak telah bergerak berdasarkan dua titik koordinat. Di antara mereka, yang layak diperhatikan adalah parameter acara dari acara tersebut. Layar sentuh umumnya acara. Saya menemukan nilai dari tiga parameter dalam tes. Namun, perlu dicatat bahwa acara Touchend tidak akan mendapatkan koordinat kontak (atau mungkin masalah perangkat). TouchMove akan terus berangkat saat bergerak. Terkadang TouchMove tidak akan memicu. Browser dilengkapi dengan fungsi untuk menghapus kontak (atau mouse) dari elemen yang dipilih. Misalnya, menekan dan menahannya tepat waktu akan muncul, (gambar pada PC akan menghasilkan thumbnail yang diseret). Dengan cara ini, event.preventdefault (); Batalkan default saat TouchStart (mousedown).
Pertanyaan 2: Bilah gulir atas dan bawah di halaman web tidak dapat menggulir saat menyeret gambar
Saya percaya bahwa masalah ini akan ditemui selama itu dilakukan. Faktanya, acara default.preventDefault () dibatalkan saat bergerak (TouchMove, Mousemove). Yang perlu kita lakukan di sini adalah apakah kontak dipindahkan dan apakah kontak konsisten dengan awal. Jika mereka konsisten, mereka akan kembali secara langsung. Ini juga perlu menghitung apakah sumbu x dipindahkan sedikit lebih atau sumbu y dipindahkan sedikit lebih. Dengan cara ini, kita dapat membatalkan default saat meluncur ke kiri dan kanan, dan tidak membatalkannya saat pergi ke sekolah;
Pertanyaan 3: Dan tidak kompatibel dengan menyeret pada mesin PC
Ini karena ketika mengikat peristiwa, Anda tidak dapat sepenuhnya mempertimbangkan apakah nama acara tersebut TouchStart atau Mousedown. Saya mencari secara online dan merasa bahwa saya tidak melakukannya, jadi saya menyalinnya secara langsung.
this.eventName = {touchstart: 'touchstart', touchmove: 'touchmove', touchend: 'touchend',} membuat penilaian if (! device) {this.eventName.touchStart = 'mousedown'; this.eventName.touchmove = 'mousemove'; this.eventname.touchend = 'mouseup';} dom.addeventListener (this.eventname.touchstart, handteevent, false);Ini mungkin apa artinya mengikat peristiwa yang berbeda sesuai dengan perangkat yang berbeda.
Sebenarnya, saya telah mengalami banyak masalah, jadi saya tidak akan menjelaskannya satu per satu
Saya tidak akan banyak bicara, hanya memposting kode. Jika ada yang buruk, harap sertakan dan berikan lebih banyak pendapat
<!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 = "Telepon = tidak" name = "format-deteksi" /> <itement> < /title> <style type = "text /css"> html, body,*{margin: 0; Padding: 0; BORDER: 0;} #wapListImage1, #WapListImage {width: 100%; meluap: tersembunyi; Tinggi: otomatis; Kursor: Pindah; 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; Bawah: 10px; Kanan: 0;}#WapListImage DL span {overflow: tersembunyi; lebar: 10px; Tinggi: 10px; Latar Belakang-Color: #900; Tampilan: inline-block;} #waplistimage dl span.selected {latar belakang-color: #000;} </tyle> </head> <body> <v id = "k"> <div id = "waplistimage"> <ul> <li> <a href = "JavaScript: void (0)" External "ov oval" overlow "nowl over over over over over over oval" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "nofollow eksternal" rel = "nofollow eksternal" hrefto = "ddd" target = "_ hitam"> <img src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> <li> <Li> <a href = "JAV =" JAV "> </a> </li> <li> <Li> <a href =" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "nofollow eksternal" rel = "nofollow eksternal" rel = "eksternal nofollow" hrefto = "ddd"> <iMg External " 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" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvzziaawcfrxe2po83.gonglve.w690.jpeg"> </a) </li> <!- <Li> <Li> <href = "JAVAS" </a) </li> <!- <Li> <Li> <a href = "JAVAS" "void" </li> <!- <Li> <a href = "JAVAS" "void: </li> <!- 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> <Li> <a href = "JAV =" JAV "> </a> </li> <li> <Li> <a href =" 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="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 =" eksternal nofollow "rel =" eksternal nofollow "rel =" eksternal nofollow "rel =" eksternal nofollow "rel =" nofollow eksternal "rel =" nofollow eksternal "rel =" eksternal nofollow "hrefto =" ddd "> <img src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrxe2po83.gonglve.w690.jpeg"> </a> </li>-> </ul </ul> </span> </a> </Li> </ul </ul> </span> </span> </2/</uT> </ul> </ulp Span> </span> </2/</ul </ul> </span> </span> </span> </Li> </ul </ul> </span> </span> </span </2/</ul </ul> </ul> </span> </span> <//</uL </ul> </ul> </span> </span> <//</uL </ul> </ulpan> </span </span> </2 <span> 4 </span> <span> 5 </span> <span> <span> 6 </span> -> </ll> </div> <div style = "tinggi: 200px;"> </div> <div id = "waplistimage1"> <ul> <li> <a href = "Javascript: void (0)" "External" External "External" External "External" External "External" External "External" External "External" External "External" Externl ollow = 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> <Li> <a href = "JAV =" JAV "> </a> </li> <li> <Li> <a href =" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "nofollow eksternal" rel = "nofollow eksternal" rel = "nofollow eksternal" rel = "eksternal 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 =" eksternal nofollow "rel =" eksternal nofollow "rel =" eksternal nofollow "rel =" eksternal nofollow "rel =" nofollow eksternal "rel =" nofollow eksternal "rel =" eksternal nofollow "hrefto =" ddd "> <img src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvzziaawcfrxe2po83.gonglve.w690.jpeg"> </a> </li> </ul> </div> <script type = " (/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: {bodywidth: 320, domul: null, lilist: null, index: index: {bodywidth: 320, domul: null, lilist: null, index: index: {bodywidth: 320, domul: null, lilist: null, index: index: index: index: index: index: index: index: {bodywidth: 320, Domul: null, null: null, null, index: {bodywidth: 320, null, null, null, null, null, index: 0, Bendera: 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? Event: window.event; // console.log (event.type) switch (event.type) {case "touchstart": var touch = event.touches [0]; case "mousedown": if (lib.page.isdown) kembali; lib.page.isdown = true; lib.page.page = lib. 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 = sentuh.pagey; if (lib.point.pagex1 == lib.point.pagex2) {event.preventDefault (); kembalikan false;} var changex = lib.point.pagex1 - lib.point.pagex2; var changey = lib.point.pagey1 - lib.point.page2; if (math.abs (changex)> math.abs (changey)) {// kiri dan kiri acara. lib.page.domul.style.marginleft = lib.page.mleft-changex+'px'; if (parsefloat (lib.page.domul.style.marginleft) <=-(lib.page.lilist.length-1)*lib.page.bodyth) {libdom.lom.lom.lom.)*lib.page.bodyth) {libdom.lom.lom -(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;}} lain if (math.abs (changey)> math.abs (changex)) {// peristiwa naik dan turun} else {// tekan panjang atau klik} break; case "mouseup": case "touchend": if (! lib.page.isdown) kembali; lib.page.etime = tanggal baru (). Gettime (); lib.page. 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)) {// peristiwa kiri dan kiri peristiwa kiri dan kiri (changex)> math.abs (changey)) {// kiri dan kiri acara kiri dan kiri acara kiri dan kiri> event.preventDefault (); lib.event.move.call (this, lib);} lain jika (math.abs (changey)> math.abs (changex)) {// event event dan down lib.event.move.call (this, lib);} else {// tekan panjang atau klik if (lib. (lib. (lib. lib. (lib. (lib. lib); {// tekan long} else {// klik if (event.button == 0 || event.type == 'touchend') {var a = lib.page.lilist [lib.page.index] .getElementsbyTagname ('a') [0]; if (typeof a.getAttribute ('target') == 'objek') {w.location = a.getAttribute ('hrefto')} else {w.open (a.getAttribute ('hrefto'));}}} {lib.page.isdown = false; break; default: break;}} {lib.page. lib.page.domul.style.marginleft = -(lib.page.index*lib.page.bodywidth) +'px'; //} else {// lib.page.domul.style.marginleft = -(index*lib.page.bodywidth) +'px'; } if (! lib.options.isfor) {if (index == tidak terdefinisi) {lib.page.domul.style.marginleft = -(lib.page.index*lib.page.style. +'px'; lib.page.index = index-1;} lib.options.callback ({"index": parseInt (lib.page.lilist [lib.page.index] .getAttribute ('index')) +1});} else {if (index == tidak definisi) {lib.mins.Mgin -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 setInterval (function () {if (lib.options.Leftorright == 'left') {lib.event.next (lib, lib);} else {lib.event.prev (lib, lib);}}, lib.options.time);}}, function: lib) {lib.options.time);}}, function: lib) {lib.options.time);}, function: lib) {lib.options.time);}, function: lib) {lib.options.time);}}, function: lib) {lib) { console.log (lib.page.previd.length+"nextid") // untuk (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.pound.pagex1-lib.poage.pagex2))/lib.options.speed; Math.abs (parseInt (lib.page.domul.style.marginleft)); while (true) {if (yu == 0) {yu = lib.page.bodywidth; break;} lain jika (yu <0) {yu = math.abs (yu); break;} yu = yu-lib.page.bodywidth} // var kiri = (lib.page.bodywidth-math.abs (parsefloat (lib.page.domul.style.marginleft)%lib.page.bodywidth))/lib.options.speed; var kiri = 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.stopid = window.setInterval (function () {// lib.event.stopy if (lib.page.moveid == null) {// clearInterval (id); //} c = c+5; lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.style.marginleft) -left*5)+'px';/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); // untuk (var n = 0; n = lib.page.nextid.length; n ++) {// clearInterval (lib.page.nextid.length; n ++) {// clearInterval (lib.page.nextid.length; lib.page.nextid = []; lib.page.index ++; lib.page.flag = false; lib.event.domupdate.call (ini, 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 = []; // 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-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) sementara (true) {if (yu == 0) {yu = lib.page. 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); clearInderVal (libev.page. window.setInterval (function () {c = c+5; lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.style.marginleft)+left.style.style.style.style. parsefloat (lib.page.domul.style.marginleft)> = 0) {if (parsefloat (lib.page.domul.style.marginleft)> = 0) {lib.page.pomul.style.marginleft = '0px';} clearinterval 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 (ini, lib, 'l'); if (lib.page.moveid.length == 0) {lib.event.start (lib, lib);}}}, 5);}, pindahkan: fungsi (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.domul.style.marginleft))-math.abs) VinderVal (fungsi () {if (lib.point.pagex2> lib.point.pagex1) {lib.page.domul.style.marginleft = (parsefloat) (lib.page.domul.style.marginleft = (parsefloat) (lIbbage.page.domul.style.marginleft = (parsefloat) + 'px';} else {lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.style.marginleft) + h*5) + 'px';} hi = hi + 5; if (hi> = 70) {clearInterIval (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 (ini, lib); if (lib.point.pagex2-lib.point.pagex1> 0) {// console.log ("===") lib.event.prev.call (ini, lib);}}, domupdate: function (lib, type) {if (lib.page.isdom) return; lib.page. 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.insed. 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 di this.options) {this.options [i] = arg [i]! == tidak terdefinisi? 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);}, f alse); w.addeventListener (this.eventname.touchmove, function (event) {lib.event.handleevent.call (lib, event, lib);}, false); w.ad dEventListener(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'; 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.bodibute ('index', i); item. this.page.bodywidth+'px';} if (this.page.lilist.length <3) {var length = this.page.lilist.length; if (length == 1) {this.page.domul.applchild (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 [i] .cloneNode (true));}}}}}}}}}}}}}}}}}}}}} {i.page 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 (ini, ini);}, mulai: 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 = wapimage baru (); Wapimage ();}; (function () {if (d.body) {loaded ();} else {if (d.addeventListener) {d.addeventListener ('domContentLoaded', function () {d.removeeventener ('domContentLoaded', arguments.calcal); if (d.attachevent) {d.attachevent ('onreadystateChange', function () {if (d.readystate === 'complete') {d.detachevent ('onReadyStateChange', argumen.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. console.log (obj.index)}}; wapimage.start (obj); wapimage.position (2) var obj2 = {dom: document.geteLementById ('waplistimage1'), callback: function (obj) {// console.log (obj.index)}}; waPiM.Apes. w.wapimage (); // img.start (obj);} </script> </body> </html>penggunaan:
Setelah pemuatan halaman selesai
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 Switching kiri atau otomatis pada callback kanan: function (obj) {// Setelah sakelar berhasil, fungsi callback sebenarnya memiliki parameter indeks ke gambar saat ini // menangani sendiri var span = document.geteLementById ('waplistImage'). Getelementsbytagname ('dl') [0] .getelementsbytagname ('var' ('dl') [0] .getelementsbytagname ('var' ('dl') [0] .getElementsbytagname '(' dl ') [0] .getelementsbyname'). Bentang 0; k <span.length; k ++) {span [k] .className = '';} span [obj.index-1] .className = 'dipilih' // console.log (obj.index)}; wapimage.start (obj); wapimage.position (2)Jika seseorang tidak memerlukan beberapa efek switching gambar, Anda dapat menemukan var loaded = fungsi () dalam kode.
Tentukan jumlah gambar yang perlu Anda ganti dan atur namanya
menyukai
w.wapimage = wapimage baru ();
w.wapimage = wapimage baru ();
Anda dapat memanggilnya langsung setelah halaman dimuat
Wapimage.start () dan wapimage.start ()