هناك العديد من هذه الأمثلة على الإنترنت ، لكنها تستخدم جميعها مكونات أخرى لجعل الرمز مربكًا ؛ هناك أيضًا استخدام التحويل في CSS3: Translate (x ، y) ؛ عناصر الهاتف المحمول ، لكنني وجدت أنه تم على الأجهزة التي لا تدعم CSS3. قرر الجميع أن يصنعوا واحدًا بأنفسهم ، لكن لديهم الكثير من المشاكل. أهم واحد هو ربط الصورة. لا يمكن للتمرير لأعلى ولأسفل أشرطة التمرير في صفحة الويب التمرير عند سحب الصورة ، وهي غير متوافقة مع السحب على جهاز الكمبيوتر. هنا سأقدم بإيجاز المشكلات التي واجهتها والحلول ؛
السؤال 1: بعد إضافة رابط إلى الصورة ، تقفز دائمًا إلى صفحات أخرى عند السحب ؛
السبب الرئيسي للمشكلة هو أنه من المستحيل تحديد ما إذا كان سيتم النقر أو السحب. الترتيب العام لأحداث الهاتف المحمول هو touchstartart-mousedown- mousemove- mouseup-》 touchend-》 انقر. قد تختلف حسب الهاتف. TouchStart -》 touchmove -》 touchend -》 يتم تنفيذ حدث انقر فوق. عندما يكون لدينا عملية TouchStart و TouchMove و Touchend و Touchend ، إذا لم نعود أو إلغاء الافتراضي ، فسيتم تشغيل حدث Click ، بحيث تقفز صفحة الويب. يتمثل الحل في تسجيل نقاط الإحداثيات لـ TouchStart و TouchMove ، وحساب ما إذا كان الاتصال قد تحرك استنادًا إلى نقطتي الإحداثيين. من بينها ، ما يستحق الاهتمام به هو معلمات الحدث للحدث. شاشة اللمس هي بشكل عام event.touches ، event.targetTouches ، Event.ChangedTouches. لقد وجدت قيم المعلمات الثلاثة في الاختبار. ومع ذلك ، تجدر الإشارة إلى أن حدث Touchend لن يحصل على إحداثيات الاتصال (أو ربما مشكلة في الجهاز). سوف تستمر TouchMove في الانطلاق عند التحرك. في بعض الأحيان لن يطلق TouchMove. يأتي المتصفح مع وظيفة لإزالة جهة الاتصال (أو الماوس) من العنصر المحدد. على سبيل المثال ، سيظهر الضغط على الضغط عليه في الوقت المحدد ، (ستنشئ الصورة على الكمبيوتر صورة مصغرة مُجر). بهذه الطريقة ، Event.PreventDefault () ؛ قم بإلغاء الافتراضي عند TouchStart (MuseDown).
السؤال 2: لا يمكن للتمرير لأعلى ولأسفل في صفحة الويب التمرير عند سحب الصورة ؛
أعتقد أن هذه المشكلة ستتم مواجهتها طالما تم القيام بها. في الواقع ، يتم إلغاء الحدث الافتراضي. ما يتعين علينا القيام به هنا هو ما إذا كانت جهات الاتصال يتم نقلها وما إذا كانت جهات الاتصال في البداية متسقة. إذا كانت متسقة ، فسوف يعودون مباشرة. يحتاج أيضًا إلى حساب ما إذا كان المحور السيني يتم نقله أكثر بقليل أو يتم نقل المحور ص قليلاً. وبهذه الطريقة ، يمكننا إلغاء الافتراضي عند الانزلاق إلى اليسار واليمين ، وعدم إلغاءه عند الذهاب إلى المدرسة ؛
السؤال 3: وهو غير متوافق مع السحب على جهاز الكمبيوتر
هذا لأنه عند ربط الأحداث ، لا يمكنك التفكير تمامًا فيما إذا كان اسم الحدث هو TouchStart أو Mousedown. لقد بحثت عبر الإنترنت وشعرت أنني لم أفعل ذلك ، لذلك قمت بنسخه مباشرة.
this.eventName = {touchStart: 'TouchStart' ، touchmove: 'touchmove' ، touchend: 'touchend' ،}إصدار الحكم
if (device) {this.eventName.touchStart = 'mousedown' ؛ this.eventName.touchMove = 'mousemove' ؛ this.eventName.touchend = 'mouseup' ؛}dom.addeventListener (this.eventName.TouchStart ، مقبض ، خطأ) ؛
ربما هذا هو ما يعنيه ربط الأحداث المختلفة وفقًا للأجهزة المختلفة.
في الواقع ، لقد واجهت العديد من المشكلات ، لذلك لن أشرح لها واحدة تلو الأخرى
لن أقول الكثير ، فقط نشر الكود. إذا كان هناك أي شيء سيء ، فيرجى تضمين المزيد من الآراء وإعطاء المزيد من الآراء
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta content = "width = width device ، inial-scale = 1.0 ، maximum-scale = 1.0 ، content-scalable = no" name = "viewport" /> <meta content = "yes" name = name = "Apple-Mobile-Web-App-Status-Bar-style" /> <meta content = "Telephone = no" name = "format-detection" /> <title> </title> <style type = "text /css"> html ، body ،*{margin: 0 ؛ الحشو: 0 ؛ الحدود: 0 ؛} #waplistimage1 ، #waplistImage {width: 100 ٪ ؛ الفائض: مخفي. الارتفاع: السيارات ؛ المؤشر: تحرك. التكبير: 1 ؛ الموضع: النسبية ؛}#waplistImage1 ul ،#waplistimage1 ul li ،#waplistimage1 ul ،#waplistimage ul li {list: none ؛}#waplistimage1 ul ، #waplistimage ul {width: 99999px ؛ 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 {place: mopile ؛ أسفل: 10 بكسل ؛ اليمين: 0 ؛}#waplistimage dl span {overflow: hidden ؛ width: 10px ؛ الارتفاع: 10 بكسل ؛ خلفية اللون: #900 ؛ العرض: 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)" external nof = 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> <a href = rel = "nofollow external" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "nofollow" src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasmdaaftzsuxuwq66.gonglve.w690.jpeg"> </a> nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "rel =" nofollow external "rel =" خارجي nofollow "hrefto = 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 = "nofollow" Target = "_ Black"> <img src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaoSx46kq9w39.gonglve.w690.jpeg"> </li> rel = "nofollow خارجي" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "external nofollow" rel = "nofollow" hrefto = "ddd"> <img src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhaSxMdaaFtzSsuxuwq66.gonglve.w690.jpeg"> </l> </li> rel = "nofollow external" 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"> </a> <span> 4 </span> <span> 5 </span> <span> <span> 6 </span> -> </dl> </viv> <div style = "الارتفاع: 200px ؛ nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "rel =" nofollow " src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> <li> <a href = rel = "nofollow external" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "nofollow الخارجي" rel = "nofollow الخارجي" rel = "nofollow الخارجي" hrefto = "ddd"> <img src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasmdaaftzsuxuwq66.gonglve.w690.jpeg"> </a> 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> </ul> (/Android | Webos | iPhone | iPad | iPod | BlackBerry | iemobile | Opera mini/i.test (navigator.useragent.toLowerCase ())) ؛ وظيفة wapimage () {this.options = {dom: NULL ، السرعة: 200 ، ISUPDATE: TRUE ، الوقت: 3000 ، LEFTORLIGHT: '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: index: index: index: 0 ، العلم: خطأ ، Stime: 0 ، etime: 0 ، Isdown: false ، mleft: 0 ، back: 30 ، moveid: [] ، nextid: null ، previd: null ، isdom: false} ، this.event = {handlevent: function (event ، lib) {event = event؟ الحدث: window.event ؛ // console.log (event.type) switch (event.type) {case "touchstart": var touch = event.touches [0] 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] 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)) {// left and left events.preventdefault () ؛ lib.page.domul.style.marginleft = lib.page.mleft-changex+'px' ؛ if (parsefloat (lib.page.domul.style.marginleft) <=-(lib.page.lilist.length.length) -(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 ؛}} آخر if (math.abs (changey)> math.abs (changex)) {// up and down events} else {// long press or click} break ؛ case "mouseup": case "touchend": if (! lib.page.isdown) return ؛ lib.page.etime = new Date (). getTime () ؛ lib.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)) event.preventDefault () ؛ lib.event.move.call (هذا ، lib) ؛} آخر إذا (math.abs (changey)> math.abs (changex)) {// Up and Down Events lib.event.move.call (this ، lib) ؛ {// long press} else {// انقر فوق if (event.button == 0 || event.type == 'touchend') {var a = lib.page.lilist A.GetAttribute ('Target') == 'Object') {w.location = A.GetAttribute ('hrefto')} آخر {w.open (a.getAttribute ('hrefto')) ؛ lib.page.domul.style.marginleft = -(lib.page.index*lib.page.bodywidth) +'px' ؛ //} آخر {// lib.page.domul.style.marginleft = -(index*lib.page.bodywidth) +'px' ؛ } if (! lib.options.isfor) {if (index == undefined) {lib.page.domul.style.marginleft = -(lib.page.index*lib.page.bodywidth) +'px' ؛ +'px' ؛ lib.page.index = index-1 ؛} lib.options.callback ({"index": parseint (lib.page.lilist [lib.page.index] .getattribute ('index')) +1}) ؛ -lib.page.bodywidth +'px' ؛} آخر {lib.page.domul.style.marginleft = -lib.page.bodywidth +'px' ؛ بينما (صحيح) {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}) ؛ i = 0 ؛ i <lib.page.moveid.length ؛ i ++) {clearinterval (lib.page.moveid [i]) ؛} lib.page.moveid = [] setInterval (function () {if (lib.options.leftorright == 'left') {lib.event.next (lib ، lib) ؛} else {lib.event.prev (lib ، lib) ؛}} ، lib.options.time) ؛ 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.pagex2)/lib.options.speed ؛ var yu = var yu = Math.abs (parseint (lib.page.domul.style.marginleft)) ؛ بينما (صحيح) {if (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 ؛ var left = 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.nextid = window.setinterval (function () 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.speed || parsefloat (lib.page.domul.style.marginleft) <= -(lib.page.liList.length -1)*lib.page.body. ) {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) ؛ // for (var n = 0 ؛ n = lib.page.nextid.length ؛ n ++) {clearinterval (lib.page.nextid [0]) ؛ lib.page.nextid = [] '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 = [] (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) بينما (صحيح) {if (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 ؛ if (lib.page.index == 0) {lib.page.flag = false ؛ window.setInterval (function () {c = c+5 ؛ lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.style.marginleft)+left*5)+'px' ؛ 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 (هذا ، lib ، 'l') ؛ if (lib.page.moveid.length == 0) {lib.event.start (lib ، lib) ؛}}} ، 5) ؛} ، نقل: 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 (lib.pageeax h/70 ؛ var hi = 0 ؛ var hi ؛ hid = window.setInterval (function () {if (lib.pagex2> lib.point.pagex1) {lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.style.marginleft) - h*5) + 'px' ؛} آخر {lib.page.domul.style.marginleft = (parsefloat (lib.page.domul.style.marginleft) + h*5) + 'px' ؛} hi = hi + 5 ؛ if (hi> = 70) -(lib.page.index*lib.page.bodywidth) +'px' ؛ lib.page.flag = false ؛} ، 5) ؛ return ؛} if (lib.pagex1 -lib.point.pagex2> 0) {lib.event.next.call (this ، lib) ؛}} if (lib.point.pagex2-lib.point.pagex1> 0) {// console.log ("===") lib.event.prev.call (هذا ، lib) ؛}} ، domupdate: function (lib ، type) {if (lib.page.isdom) return ؛ lib.isdom.is ؛ lib.page.lilist [lib.page.index] .getattribute ('index') ؛ lib.options.callback ({"index": parseint (index) +1}) ؛ lib.page.isdom = false ؛} 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 ({"index": parseint (index) +1}) ؛ lib.page.isdom = false ؛} ؛} ؛ الدالة (arg) {for (var i in this.options) {this.options [i] = arg [i]! == undefined؟ Arg [i]: this.options [i] ؛} if (! device) {this.eventName.touchStart = 'mousedown' ؛ this.eventName.touchMove = 'mousemove' ؛ this.eventName.Touchend = 'mouseup' 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 () ؛ this.page.lilist = this.options.dom.getElementsByTagName ('li') ؛ this.page.domul = this.options.dom.getElementsByTagname ('ul') [0] i = 0 ؛ i <this.page.lilist.length ؛ i ++) {var item = this.page.lilist [i] ؛ var img = item.getElementsByTagName ('img') [0] this.page.bodywidth+'px' ؛} if (this.page.lilist.length <3) {var length = this.page.lilist.length ؛ if (length == 1) {this.page.domul.appendchild (this.page.lilist [0] .clonenode (true)) ؛ this.page.domul.appendChild (this.page.lilist [0] .clonenode (true)) ؛} آخر {for (var i = 0 ؛ i <length ؛ i ++) {this.page.domul.appendchild (this.page.lilist [i] .clonenode (true)) ؛ this.options.dom.getElementSbyTagname ('li') ؛ }} ، الموضع: function (index) {this.event.position.call (هذا ، هذا ، الفهرس) ؛} ، التالي: function () {this.event.next.call (this ، this ، this ، وظيفة (arg) {this.setOption (arg) ؛ this.init () ؛ this.position () ؛ this.bindevent () ؛ this.event.domupdate (this ، 'l') ؛ this.event.start (this) ؛}} ؛ var loaded = function () {w.wapimage = new wapimage () ؛ wapimage () ؛} ؛ (function () {if (d.body) {loaded () ؛} آخر {if (d.addeventListener) {d.addeventListener ('domcontentloaded' ، function () if (d.attachevent) {d.attachevent ('onReadyStateChange' ، function () {if (d.ReadyState === 'complete') {d.detachevent ('onReadyStateChange' ، ediuments.callee) ؛ obj = {dom: document.getElementById ('waplistImage') ، isUpdate: true ، الوقت: 3000 ، ISFor: true ، lentorright: 'left' ، callback: function (obj) {var span = document.getElementById ('wapListImage'). 0 ؛ k <span.length ؛ k ++) {span [k] .classname = '' ؛} span [obj.index-1] .className = 'selection' // console.log (obj.index)}} رد الاتصال: الدالة (obj) {// console.log (obj.index)}} ؛ wapimages.start (obj2) ؛ // var img = new w.wapimage () ؛ // img.start (obj) ؛} </script> </html> </html>الاستخدام:
بعد اكتمال تحميل الصفحة
var obj = {dom: document.getElementById ('waplistImage') ، // dom element isupdate: true ، // هل يتم تبديل الوقت تلقائيًا: 3000 ، // وقت التحول التلقائي Is for: true ، // هل هو محلق ، أي ما إذا كان يجب نقله مباشرة إلى الصورة الأولى ، أو إلى نقل الصورة الأخيرة مباشرة إلى الصورة الأخيرة: التبديل الأيسر أو التلقائي على رد الاتصال الأيمن: الدالة (obj) {// بعد التبديل بنجاح ، فإن وظيفة رد الاتصال لديها في الواقع معلمة الفهرس إلى الصورة الحالية // التعامل معها بنفسك var span = document.getElementById ('waplistimage'). 0 ؛ k <span.length ؛ k ++) {span [k] .classname = '' ؛} span [obj.index-1] .className = 'selection' // console.log (obj.index)}} ؛ wapimage.start (obj) ؛ wapimage.position (2)إذا كان الشخص لا يحتاج إلى تأثيرات متعددة لتبديل الصور ، فيمكنك العثور على vared = function () في الكود.
حدد عدد الصور التي تحتاجها للتبديل وتعيين الاسم
يحب
W.WAPIMAGE = جديد wapimage () ؛
w.wapimages = new wapimage () ؛
يمكنك الاتصال به مباشرة بعد تحميل الصفحة
wapimage.start () و wapimages.start ()