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 dilakukan pada perangkat yang tidak mendukung CSS3. Semua orang memutuskan untuk membuatnya sendiri, tetapi mereka memiliki banyak masalah. 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, Anda selalu melompat ke halaman lain saat menyeret;
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 di awal konsisten. 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, handleevent, 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 ();}});}}}} () (); obj = {dom: document.geteLementById ('waplistImage'), isUpdate: true, time: 3000, iSfor: true, leftorright: 'left', callback: function (obj) {var span = document.geteLementById ('waplistImage'). GetElementsbyTagname ('DLL') [0] [0] [0] [0] [0] [0] [0 0; k <span.length; k ++) {span [k] .classname = '';} span [obj.index-1] .className = 'dipilih' // console.log (obj.index)}}; wapimage.start (obj); wapimage.position (2) var obj2 = {oBj); wapimage.position (2) var Obj2 = {oBj); wapimage.position (2) var Obj2 = {oBj); wapimage.position (2) var Obj2 = callback: function (obj) {// console.log (obj.index)}}; wapimage.start (obj2); // var img = w.wapimage baru (); // img.start (obj);} </script> </body> </html>penggunaan:
Setelah pemuatan halaman selesai
var obj = {dom: document.geteLementById ('waplistImage'), // dom elemen isupdate: true, // Apakah secara otomatis beralih waktu: 3000, // Waktu pengalihan otomatis adalah: true, // Apakah itu secara langsung, apakah ada gambar yang akan langsung ditransfer ke gambar pertama ke gambar pertama ke gambar terakhir, atau secara langsung ke gambar yang terakhir, apakah akan ditransfer secara langsung ke gambar pertama ke gambar terakhir, atau atau secara langsung ke gambar yang terakhir, apakah akan langsung mentransfer ke gambar pertama ke gambar terakhir, atau atau secara langsung ke gambar, apakah akan langsung mentransfer ke gambar pertama ke gambar pertama, atau ke dalam gambar terakhir, atau langsung ke gambaran yang langsung ke gambar pertama ke gambar terakhir, atau secara langsung ke gambar terakhir, atau secara langsung ke gambar yang langsung ke gambar pertama, atau secara langsung ke gambar pertama, atau secara langsung ke The Last Picture, atau langsung, 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 ()