มีตัวอย่างมากมายบนอินเทอร์เน็ต แต่พวกเขาทั้งหมดใช้ส่วนประกอบอื่น ๆ เพื่อทำให้รหัสสับสน นอกจากนี้ยังมีการใช้การแปลงใน CSS3: แปล (x, y); องค์ประกอบมือถือ แต่ฉันพบว่ามันทำบนอุปกรณ์ที่ไม่รองรับ CSS3 ทุกคนตัดสินใจทำด้วยตัวเอง แต่พวกเขามีปัญหามากมาย สิ่งที่สำคัญที่สุดคือการเชื่อมโยงภาพ แถบเลื่อนขึ้นและลงในหน้าเว็บไม่สามารถเลื่อนได้เมื่อลากรูปภาพและไม่สามารถใช้งานได้กับการลากบนเครื่องพีซี ที่นี่ฉันจะแนะนำปัญหาที่พบและการแก้ปัญหาสั้น ๆ
คำถามที่ 1: หลังจากเพิ่มลิงก์ไปยังภาพคุณมักจะข้ามไปยังหน้าอื่น ๆ เมื่อลาก;
เหตุผลหลักสำหรับปัญหาคือมันเป็นไปไม่ได้ที่จะพิจารณาว่าจะคลิกหรือลาก คำสั่งทั่วไปของกิจกรรมโทรศัพท์มือถือคือ TouchStart-》 Mousedown-》 Mousemove-》 Mouseup-》 Touchend-》 คลิก มันอาจแตกต่างกันไปขึ้นอยู่กับโทรศัพท์ TouchStart -》 TouchMove -》 TouchEnd -》 Event Event จะถูกดำเนินการล่าสุด เมื่อเรามี TouchStart, touchmove, touchend และ process touchend หากเราไม่กลับหรือยกเลิกค่าเริ่มต้นเหตุการณ์การคลิกจะถูกเรียกใช้ดังนั้นหน้าเว็บจะกระโดดออกไป วิธีแก้ปัญหาคือการบันทึกจุดพิกัดของ TouchStart และ TouchMove และคำนวณว่าผู้ติดต่อได้เลื่อนผ่านไปตามจุดพิกัดทั้งสองหรือไม่ ในหมู่พวกเขาสิ่งที่ควรค่าแก่การให้ความสนใจคือพารามิเตอร์เหตุการณ์ของเหตุการณ์ โดยทั่วไปหน้าจอสัมผัสจะเป็นเหตุการณ์. touches, event.targetTouches, event.changedTouches ฉันพบค่าของพารามิเตอร์ทั้งสามในการทดสอบ อย่างไรก็ตามเป็นที่น่าสังเกตว่าเหตุการณ์ touchend จะไม่ได้รับพิกัดติดต่อ (หรืออาจเป็นปัญหาของอุปกรณ์) TouchMove จะยังคงออกเดินทางต่อไปเมื่อย้าย บางครั้ง TouchMove จะไม่กระตุ้น เบราว์เซอร์มาพร้อมกับฟังก์ชั่นเพื่อลบหน้าสัมผัส (หรือเมาส์) ออกจากองค์ประกอบที่เลือก ตัวอย่างเช่นการกดค้างไว้ตรงเวลาจะปรากฏขึ้น (รูปภาพบนพีซีจะสร้างภาพขนาดย่อที่ลาก) ด้วยวิธีนี้ Event.preventDefault (); ยกเลิกค่าเริ่มต้นเมื่อ TouchStart (Mousedown)
คำถามที่ 2: แถบเลื่อนขึ้นและลงในหน้าเว็บไม่สามารถเลื่อนได้เมื่อลากรูปภาพ
ฉันเชื่อว่าปัญหานี้จะพบได้ตราบใดที่ทำ ในความเป็นจริงเหตุการณ์เริ่มต้น preventdefault () จะถูกยกเลิกเมื่อย้าย (touchmove, mousemove) สิ่งที่เราต้องทำที่นี่คือไม่ว่าจะมีการย้ายผู้ติดต่อหรือไม่และผู้ติดต่อที่เริ่มต้นนั้นสอดคล้องกันหรือไม่ หากพวกเขาสอดคล้องกันพวกเขาจะกลับมาโดยตรง นอกจากนี้ยังต้องคำนวณว่าแกน x ถูกย้ายเพิ่มขึ้นเล็กน้อยหรือไม่หรือแกน y ถูกย้ายขึ้นอีกเล็กน้อย ด้วยวิธีนี้เราสามารถยกเลิกค่าเริ่มต้นเมื่อเลื่อนไปทางซ้ายและขวาและไม่ยกเลิกเมื่อไปโรงเรียน
คำถามที่ 3: และมันเข้ากันไม่ได้กับการลากบนเครื่องพีซี
นี่เป็นเพราะเมื่อเหตุการณ์ที่มีผลผูกพันคุณไม่สามารถพิจารณาได้อย่างเต็มที่ว่าชื่อเหตุการณ์เป็น TouchStart หรือ Mousedown ฉันค้นหาออนไลน์และรู้สึกว่าฉันไม่ได้ทำดังนั้นฉันจึงคัดลอกโดยตรง
this.eventName = {touchStart: 'TouchStart', TouchMove: 'TouchMove', touchend: 'touchend',}การตัดสิน
if (! อุปกรณ์) {this.eventName.touchstart = 'mousedown'; this.eventname.touchmove = 'mousemove'; this.eventname.touchend = 'mouseup';}dom.addeventListener (this.eventname.touchstart, HandleEvent, False);
นี่อาจเป็นความหมายของการผูกเหตุการณ์ที่แตกต่างกันตามอุปกรณ์ที่แตกต่างกัน
ที่จริงฉันพบปัญหามากมายดังนั้นฉันจะไม่อธิบายพวกเขาทีละคน
ฉันจะไม่พูดมากแค่โพสต์รหัส หากมีสิ่งที่ไม่ดีโปรดรวมและให้ความคิดเห็นเพิ่มเติม
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ระดับสูงสุด = 1.0, scalable = no" name = "viewport" /> <meta content = "ใช่" name = "apple-mobile-web-app-status-bar-bar" /> <meta content = "โทรศัพท์ = no" name = "การตรวจจับรูปแบบ" /> <title> < /title> <style type = "text /css"> html, body,*{margin: 0; Padding: 0; ชายแดน: 0;} #waplistimage1, #wapleistimage {width: 100%; ล้น: ซ่อน; ความสูง: อัตโนมัติ; เคอร์เซอร์: ย้าย; ซูม: 1; ตำแหน่ง: ญาติ;}#waplistimage1 ul,#waplistimage1 ul li,#waplistimage1 ul,#waplistimage ul li {list-style: none;}#weplistimage1 ul, #waplistimage ul {width: 99999px; ซ้าย;}#waplistimage ul li img: โฟกัส,#waplistimage ul li img: ตรวจสอบ,#waplistimage ul li a img,#waplistimage ul li img: active,#waplistimage ul li li a,#waplistimage ul li a: แอคทีฟ ด้านล่าง: 10px; ขวา: 0;}#waplistimage dl span {overflow: hidden; width: 10px; ความสูง: 10px; พื้นหลังสี: #900; จอแสดงผล: inline-block;} #waplistimage dl span.elected {พื้นหลัง-สี: #000;} </style> </head> <body> <div id = "k"> <div id = "waplistimage"> <ul> <li> rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" hrefto = "ddd" target = "_ black"> <img src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuxuwq66.gonglve.w690.jpeg"> </a> </li> nofollow "rel =" ภายนอก nofollow "rel =" ภายนอก nofollow "rel =" ภายนอก nofollow "rel =" nofollow ภายนอก "rel =" nofollow ภายนอก "rel =" nofollow ภายนอก "rel =" nofollow ภายนอก "rel =" nofollow ภายนอก "rel =" ภายนอก src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrxe2po83.gonglve.w690.jpeg"> </a> </li> rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "external nofollow" external nofollow " target = "_ black"> <img src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaoosx46kq9w39.gonglve.w690.jpeg" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" external nofollow hrefto = "ddd"> <img src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuxuwq66.gonglve.w690.jpeg" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก 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 = "ความสูง: 200px;"> </div> <div id = "WaPlistimage1"> <ul> <li> nofollow "rel =" ภายนอก nofollow "rel =" ภายนอก nofollow "rel =" ภายนอก nofollow "rel =" ภายนอก nofollow "rel =" nofollow ภายนอก "rel =" ภายนอก nofollow "rel =" nofollow ภายนอก "rel =" ภายนอก " src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> rel = "ภายนอก nofollow" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "ภายนอก nofollow" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" hrefto = "ddd"> <img <img src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuxuwq66.gonglve.w690.jpeg"> </a> </li> nofollow "rel =" ภายนอก nofollow "rel =" ภายนอก nofollow "rel =" ภายนอก nofollow "rel =" nofollow ภายนอก "rel =" nofollow ภายนอก "rel =" nofollow ภายนอก "rel =" nofollow ภายนอก "hrefto =" ddd "> <img src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrxe2po83.gonglve.w690.jpeg"> </a> </li> (/Android | WebOS | iPhone | iPad | iPod | BlackBerry | IEMOBILE | OPERA MINI/I.TEST (NAVIGATOR.USERAGENT.TOLOWERCASE ()); NULL, ความเร็ว: 200, isUpdate: จริง, เวลา: 3000, leftorright: 'ซ้าย', isfor: false, callback: function () {}}, this.eventName = {touchStart: 'TouchStart', TouchMove: ' touchMove ', touchend:' touchend ',}, this.point = {x: 5, y: 5, pagex1: 0, pagex2: 0, หน้า 1: 0, page2: 0}, this.page = {bodywidth: 320, domul: null, lilist: null, ดัชนี: 0, Flag: False, Stime: 0, Etime: 0, Isdown: False, Mleft: 0, Back: 30, MoveId: [], NextId: null, previd: null, isdom: false}, this.event = {handlevent: ฟังก์ชั่น (เหตุการณ์, lib) {เหตุการณ์ = เหตุการณ์? เหตุการณ์: window.event; // console.log (event.type) สวิตช์ (event.type) {case "touchstart": var touch = event.touches [0]; กรณี "mousedown": ถ้า (lib.page.isdown) return; lib.page.isdown = true; lib.page.stime วันที่ (). getTime (); lib.event.stop (lib, lib); if (event.type == "mousedown") {touch = event; event.preventdefault ();} lib.point.pagex1 = lib.point.pagex2 = touch.pagex; 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]; กรณี "mousemove": ถ้า (! lib.page.isdown) return; if (event.type == "mousemove") {touch = event; 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; ถ้า (math.abs (changex)> math.abs lib.page.domul.style.marginleft = lib.page.mleft-changex+'px'; ถ้า (parsefloat (lib.page.domul.style.marginleft) <=-(lib.page.lilist.length-1) -(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)) {// up and down events} else {// กดยาวหรือคลิก} break; กรณี "mouseup": กรณี "touchend": ถ้า (! lib.page.isdown) return; lib.page.etime = วันที่ใหม่ 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; ถ้า (math.abs (changex)> math.abs (เปลี่ยน)) Event.preventDefault (); lib.event.move.call (this, lib);} อื่นถ้า (math.abs (เปลี่ยน)> math.abs (changex)) {// up and down lib.event.move.call (this, lib); {// ยาวกด} else {// คลิกถ้า (event.button == 0 || event.type == 'touchend') {var a = lib.page.lilist [lib.page.index] A.getAttribute ('target') == 'Object') {W.Location = A.getAttribute ('hrefto')} else {w.open (a.getAttribute ('hrefto'));}}} lib.page.isdown = false; lib.page.domul.style.marginleft = -(lib.page.index*lib.page.bodywidth) +'px'; //} else {// lib.page.domul.style.marginleft = -(ดัชนี } if (! lib.options.isfor) {ถ้า (index == undefined) {lib.page.domul.style.marginleft = -(lib.page.index*lib.page.bodywidth) +'px'; +'px'; lib.page.index = index-1;} lib.options.callback ({"ดัชนี": parseint (lib.page.lilist [lib.page.index] .getAttribute ('ดัชนี') +1}); -lib.page.bodywidth +'px';} else {lib.page.domul.style.marginleft = -lib.page.bodywidth +'px'; ในขณะที่ (จริง) {if (parseint (ดัชนี) == 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 ({"ดัชนี": parseint (lib.page.lilist [1] .getAttribute ('ดัชนี'))+1}); i = 0; i <lib.page.moveid.length; i ++) {clearinterval (lib.page.moveid [i]);} lib.page.moveid = [];}, เริ่มต้น: ฟังก์ชั่น (lib) {ถ้า (lib.options.isupdate) setInterval (function () {ถ้า (lib.options.leftorright == 'ซ้าย') {lib.event.next (lib, lib);} else {lib.event.prev (lib, lib);}}, lib.options.time); console.log (lib.page.previd.length+"nextid") // สำหรับ (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) math.abs (parseint (lib.page.domul.style.marginleft)); ในขณะที่ (จริง) {ถ้า (yu == 0) {yu = lib.page.bodywidth; break;} อื่นถ้า (yu <0) {yu = math.abs (yu); break;} yu = yu-lib.page.bodywidth} // var left = (lib.page.bodywidth-math.abs (parsefloat (lib.page.domul.style.marginleft)%lib.page.bodywidth))/lib.options.speed; 0; if (lib.page.index == lib.page.lilist.length-1) {lib.page.flag = false; return;} clearinterval (lib.page.nextid); lib.page.nextid = window.setInterval 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 ("ถัดไป"+lib.page.domul.style.marginleft); ถ้า (c> = lib.options.speed || parsefloat (lib.page.domul.style.marginleft) <= -(lib.page.lilist.length -1) ) {ถ้า (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); // สำหรับ (var n = 0; n = lib.page.nextid.length; n ++) lib.page.nextid = []; lib.page.index ++; lib.page.flag = false; lib.event.domupdate.call (นี่, lib, lib, 'r'); ถ้า (lib.page.moveid.length == 0) {lib.event.start (lib, lib);}}}, 5);}, ก่อนหน้า: ฟังก์ชั่น (lib) {// // // console.log (lib.page.nextid.length+"nextid") // สำหรับ (var n = 0; n = lib.page.nextid.length; n ++) {// // clearinterval (lib.page.nextid [0]); //} clearinterval 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; (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) ในขณะที่ (จริง) {ถ้า (yu == 0) 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; ถ้า (lib.page.index == 0) {lib.page.flag = false; return;} var ml = parsefloat (lib.page.domul.style.marginleft); window.setInterval (ฟังก์ชั่น () {c = c+5; lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.style.marginleft)+ซ้าย*5)+'px'; // console.log parsefloat (lib.page.domul.style.marginleft)> = 0) {ถ้า (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 (นี่, lib, 'l'); (lib.page.moveid.length == 0) {lib.event.start (lib, lib);}}}, 5);}, ย้าย: ฟังก์ชั่น (lib) {ถ้า (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) h/70; var hi = 0; var hi; hid = window.setInterval (ฟังก์ชั่น () {ถ้า (lib.point.pagex2> lib.point.pagex1) {lib.page.domul.style.marginleft = (parsefloat + 'px';} else {lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.style.marginleft) + h*5) + 'px';} hi = hi + 5; ถ้า (hi> = 70) -(lib.page.index*lib.page.bodywidth) +'px'; lib.page.flag = false;}}, 5); return;} ถ้า (lib.point.pagex1 -lib.point.pagex2> 0) {lib.event.next.call if (lib.point.pagex2-lib.point.pagex1> 0) {// console.log ("===") lib.event.prev.call (นี่, lib);}}, domupdate: ฟังก์ชัน (lib, type) {ถ้า (lib.page.isdom) lib.date. lib.page.lilist [lib.page.index] .getAttribute ('index'); lib.options.callback ({"ดัชนี": parseint (ดัชนี) +1}); lib.page.isdom = false; return;} if (type == 'l') 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 ++;} อื่น 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 ({"ดัชนี": parseint (ดัชนี) +1}); lib.page.isdom = false; ฟังก์ชั่น (arg) {สำหรับ (var i ใน this.options) {this.options [i] = arg [i]! == ไม่ได้กำหนด? arg [i]: this.options [i];} if (! อุปกรณ์) {this.eventName.touchstart = 'mousedown'; this.eventName.touchmove = 'mousemove'; this.eventname.touchend = 'mouseup'; this.page.domul.addeventListener (this.eventname.touchstart, ฟังก์ชั่น (เหตุการณ์) {lib.event.handleevent.call (lib, เหตุการณ์, lib);}, f alse); w.addeventListener (this.eventname.touchmove, ฟังก์ชั่น (เหตุการณ์) {lib.event.handleevent.call (lib, เหตุการณ์, lib);}, false); w.ad deventListener (this.eventName.Touchend, ฟังก์ชั่น (เหตุการณ์) {lib.event.handleevent.call (lib, เหตุการณ์, lib);}, เท็จ); w.addeventListener ('resize', function () this.page.lilist = this.options.dom.detElementsByTagname ('li'); this.page.domul = this.options.dom.detElementsByTagname ('ul') [0]; this.Options.dom.style.width = this.page.bodeWidth+'px'; item = this.page.lilist [i]; var img = item.getElementsByTagname ('img') [0]; item.setAttribute ('ดัชนี', i); item.style.width = this.page.bodywidth+'px'; this.page.bodywidth+'px';} if (this.page.lilist.length <3) {var length = this.page.lilist.length; ถ้า (ความยาว == 1) {this.page.domul.appendchild (this.page.lilist [0] .clonenode this.page.domul.appendchild (this.page.lilist [0] .clonenode (true));} else {สำหรับ (var i = 0; i <length; i ++) {this.page.domul.appendchild (this.page.lilist [i] .clonenode this.options.dom.getElementsByTagname ('li'); }}, ตำแหน่ง: ฟังก์ชั่น (ดัชนี) {this.event.position.call (นี่, สิ่งนี้, ดัชนี);}, ถัดไป: function () {this.event.next.call (นี่, นี่);}, prev: function () {this.event.prev.call (นี่); ฟังก์ชั่น (arg) {this.setOption (arg); this.init (); this.position (); this.bindevent (); this.event.domupdate (นี่, 'l'); this.event.start (นี่);}}; wapimage ();}; (ฟังก์ชัน () {ถ้า (d.body) {loaded ();} else {ถ้า (d.addeventListener) {d.addeventListener ('domcontenteded', ฟังก์ชั่น (); if (d.attacheVent) {d.attachevent ('onreadystatechange', function () {ถ้า (d.readystate === 'เสร็จสมบูรณ์') {d.detachevent ('onreadystatechange', arguments.callee); loaded ();}});}}}}) {dom: document.getElementById ('waplistimage'), isUpdate: จริง, เวลา: 3000, isfor: จริง, ซ้าย: 'ซ้าย', การโทรกลับ: ฟังก์ชั่น (obj) {var span = document.getElementById ('waplistimage') 0; k <span.length; k ++) {span [k] .classname = '';} span [obj.index-1] .classname = 'เลือก' // console.log (obj.index)}}; wapimage.start (obj); การโทรกลับ: ฟังก์ชั่น (obj) {// console.log (obj.index)}}; wapimages.start (obj2); // var img = ใหม่ w.wapimage (); // img.start (obj);} </script> </body>การใช้งาน:
หลังจากการโหลดหน้าเสร็จสมบูรณ์
var obj = {dom: document.getElementById ('waplistimage'), // องค์ประกอบ dom isupdate: จริง, // คือการสลับเวลาโดยอัตโนมัติหรือไม่: 3000, // เวลาของการสลับอัตโนมัติ: จริง // มันเป็นภาพที่เหลืออยู่ การสลับซ้ายหรืออัตโนมัติบนการโทรกลับด้านขวา: ฟังก์ชั่น (obj) {// หลังจากสวิตช์สำเร็จฟังก์ชั่นการโทรกลับจริง ๆ แล้วมีพารามิเตอร์ดัชนีไปยังรูปภาพปัจจุบัน // จัดการกับตัวเอง 0; k <span.length; k ++) {span [k] .classname = '';} span [obj.index-1] .classname = 'เลือก' // console.log (obj.index)}}; wapimage.start (obj); wapimage.position (2)หากไม่มีเอฟเฟกต์การสลับรูปภาพหลายรายการคุณสามารถค้นหา var loaded = function () ในรหัส
กำหนดจำนวนรูปภาพที่คุณต้องการสลับและตั้งชื่อ
ชอบ
w.wapimage = new wapimage ();
w.wapimages = new wapimage ();
คุณสามารถเรียกได้โดยตรงหลังจากโหลดหน้าเว็บ
wapimage.start () และ wapimages.start ()