インターネットにはそのような例がたくさんありますが、それらはすべて他のコンポーネントを使用してコードを混乱させます。また、CSS3：翻訳（x、y）に変換の使用もあります。モバイル要素ですが、CSS3をサポートしていないデバイスでほぼ完了していることがわかりました。そのため、自分で作ることにしました。予想外に、多くの問題が発生します。最も重要なのは、写真をリンクすることです。 Webページの上下のスクロールバーは、画像をドラッグするときにスクロールできず、PCマシンでのドラッグと互換性がありません。ここでは、遭遇した問題と解決策を簡単に紹介します。
質問1：画像にリンクを追加した後、ドラッグするときは常に他のページにジャンプします
問題の主な理由は、クリックするかドラッグするかを判断することが不可能であることです。携帯電話イベントの一般的な注文は、ムースダウン - マウスモーブ - マウスアップ - タッチエンド - クリックです。電話によって異なる場合があります。 TouchStart -》 TouchMove -》TouchEnd -》クリックイベントが最後に実行されます。 TouchStart、TouchMove、TouchEnd、およびTouchEndプロセスがある場合、デフォルトを返したりキャンセルしたりしないと、クリックイベントがトリガーされるため、Webページが飛び去ります。解決策は、TouchStartとTouchMoveの座標ポイントを記録し、2つの座標ポイントに基づいて連絡先が移動したかどうかを計算することです。その中で、イベントのイベントパラメーターは注意を払う価値があります。通常、タッチスクリーンはevent.touches、event.targettouches、event.changedtouchesです。テストで3つのパラメーターの値を見つけました。ただし、TouchEndイベントでは連絡先座標（またはおそらくデバイスの問題）が取得されないことは注目に値します。 TouchMoveは、移動するときに引き続き出発します。 TouchMoveがトリガーされない場合があります。ブラウザには、選択した要素から接点（またはマウス）を削除する機能が付属しています。たとえば、それを時間通りに押して保持することが表示されます（PCの写真はドラッグされたサムネイルを生成します）。このように、event.preventdefault（）; TouchStart（Mousedown）の場合、デフォルトをキャンセルします。
質問2：Webページの上下のスクロールバーは、写真をドラッグするときにスクロールできません
この問題は、それが行われている限り遭遇すると信じています。実際、デフォルトのevent.preventdefault（）は、移動時にキャンセルされます（touchmove、mousemove）。ここで行う必要があるのは、連絡先が移動されているかどうか、および連絡先が最初と一致しているかどうかです。それらが一貫している場合、それらは直接戻ります。また、X軸がもう少し移動するか、Y軸がもう少し移動するかどうかを計算する必要があります。このようにして、左右にスライドするときにデフォルトをキャンセルし、学校に行くときはキャンセルしません。
質問3：それはPCマシンでのドラッグと互換性がありません
これは、イベントをバインドする場合、イベント名が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、culderevent、false）;これはおそらく、さまざまなデバイスに従って異なるイベントをバインドすることの意味です。
実際、私は多くの問題に遭遇したので、私はそれらを1つずつ説明しません
私はあまり言いません、コードを投稿するだけです。何か悪いことがある場合は、含めてもっと意見を述べてください
<！Doctype html> <HTML> <head> <meta charset = "utf-8"> <meta content = "width =" device-width、infirtial-scale = 1.0、maximing-scale = 1.0、user-scalable = no "name =" viewport " /> <meta content ="はいname = "apple-mobile-web-app-status-bar-style" /> <meta content = "電話= no" name = "format-retection" /> <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-style：none;}＃waplistimage1 ul、＃waplistimage ul {width：99999px;}左;}＃waplistimage ul li a img：focus、＃waplistimage ul li a img：checked、＃waplistimage ul li a img、＃waplistimage ul li a img：active、＃waplistimage li a、＃waplistimage ul li a：active {cursor：move;下：10px;右：0;}＃waplistimage dl span {オーバーフロー：hidden; width：10px;高さ：10px;バックグラウンドカラー：＃900;ディスプレイ：inline-block;}＃waplistimage dl span.selected {background-color：＃000;} </style> </head> <body> <div div = "k"> <div id = "waplistimage"> <ul> <ul> <li> <a href = "javascript：void（0） rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = " src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> < nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow "hrefto =" ddd "> <img src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuxuwq66.gonglve.w690.jpeg"> </a> </li> <a href = "javascript：" liid（0） nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "hrefto =" ddd "> <img src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrxe2po83.gonglve.w690.jpeg"> </a> </li> <！ - < nofollow "rel =" external nofollow "rel =" external nofollow "rel =" ferternal nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "_ src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> < nofollow "rel =" external nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "hrefto src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuxuwq66.gonglve.w690.jpeg"> </a> </li> <a href = "javascript：" liid（0） nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow "hrefto =" ddd "> <img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li> --></ul><dl><span>1</span><span>2</span><span>3</span><!-- <Span> 4 </span> <span> 5 </span> <span> <span> 6 </span> - > </dl> </div> <div style = "height：200px;"> </div> <div div = "waplistimage1"> <ul> <ul> <ul> <li> <li> <a href = "javascript：void（void（0） nofollow "rel =" external nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "hrefto =" dd "" _ black "> src = "http://file25.mafengwo.net/m00/37/74/wkgb4lm9hb-arjpjaaosx46kq9w39.gonglve.w690.jpeg"> </a> </li> < nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow "hrefto =" ddd "> <img src = "http://file25.mafengwo.net/m00/f2/06/wkgb4lnahhcasxmdaaftzsuxuwq66.gonglve.w690.jpeg"> </a> </li> <a href = "javascript：" liid（0） nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow "hrefto =" ddd "> <img src = "http://file25.mafengwo.net/m00/2b/ee/wkgb4lnwdpeabvziaawcfrxe2po83.gonglve.w690.jpeg"> </a> </li> </ul> </div> div> <script = "/javascript"> （/android | webos | iPhone | iPad | iPod | iPod | iEmobile | Opera mini/i.test（navigator.useragent.tolowercase（）））; function wapimage（）{this.options = {dom：{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： 0、fals：false、stime：0、etime：0、isdown：false、mleft：0、back：30、moveid：[]、nextid：null、previd：null、isdom：false}、this.event：function（event、lib）{event = event？イベント：window.event; // console.log（event.type）switch（event.type）{case "touchstart"：var touch = event.touches [0]; case "mousedown"：if（lib.page.isdown）return; lib.page.isdown = true; lib.page.stim date（）。gettime（）; lib.event.stop（lib、lib）; if（event.type == "mousedown"）{touch = event; event; event.preavedefault（）;} 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]; case "mousemove"：if（！lib.page.isdown）return; if（event.type == "mousemove"）{touch = event;} lib.point.pagex2 = touchx; lib.pagex; lib.pagex; lib.pagex; touch.pagey; if（lib.point.pagex1 == lib.point.pagex2）{event.preventdefault（）; false;} var changex = lib.point.pagex1 -lib.point.pagex2; var changey = lib.point.pagey1 -lib.point.pagey2; if（math.abs（changex）> math.abs）{//左および左のイベントevent.preventdefault（）; lib.page.domul.style.marginleft = lib.page.mleft-changex+'px'; if（parsefloat（lib.page.domul.style.marginleft）<= - （lib.page.lilist.lention-1）*lib.page.bodywidth {lib.page.domul.style.style.style.style.domul.style.domul.style.domul.style. - （lib.page.lilist.length-1）*lib.page.bodywidth+'px'; lib.page.mleft = - （lib.page.lilist.length-1）*lib.page.bodywidth ; if（math.abs（changey）> math.abs（changex））{// up and down events} else {// long pressまたはclick} break; 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））{//左左のイベント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）;} els {// long press} else {// if（event.button == 0 || event.type == 'touchend'）{var a = lib.page.lilist [lib.page.index] .getelementsbytagname（ 'a'）[0]; if（typeof a.getAttribute（ 'target'）== 'object'）{w.location = a.getattribute（ 'hrefto'）} else {w.open（a.getattribute（ 'hrefto'））;}}}} lib.page.domul.style.marginleft = - （lib.page.index*lib.page.bodywidth） +'px'; //} } if（！lib.options.isfor）{if（index == undefined）{lib.page.domul.style.marginleft = - （lib.page.index*lib.page.bodywidth） +'px';} else {lib.page.domul.style.marginleft = - （index -1） +'px'; lib.page.index = index-1;} lib.options.callback（{"index"：parseint（lib.page.index] .getAttribute（ 'index'）） +1}）;} els {if（index == ushided）{lib.domul.domul.domul.domul.domul.domul.domul.domul.domul.domul.domul.domul.domul.domul.domul.domul.domul.domul.domul.dumy. -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.domul.domul.domul lilist.length-1]、lib.page.lilist [0]）;}} lib.options.callback（{"index"：parseint（lib.page.lilist [1] .getattribute（ 'index'））+1}）;}}、stop：function（lib）{for 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.moveId[lib.page.moveId.length] = 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.point.pagex2））/lib.opeed; var yu =; 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）;} 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.nextid）; lib.nextid = window.setinterval（function（）{// lib.event.stop（lib、lib）; if（lib.page.moveid == null）{// clearinterval（id）; //} c = c+5; lib.page.domul.style.marginleft =（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.lent -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）; // for（var n = 0; n = 0; n ++）{// clearinterval（lib.nextid [0]）; /////// lib.page.nextid = []; lib.page.index ++; lib.page.flag = fals; 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"）// for（var n = 0; n = lib.page.nextid.length; n ++）{// // clearinterval（lib.page.nextid [0]; 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） 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;} var ml = parsefloat（lib.page.domul.style.marginleft）; clearinterval（lib.page.previd）; libid）; window.setInterval（function（）{c = c+5; lib.page.domul.style.marginLeft =（parsefloat（lib.page.domul.style.marginleft）+left*5）+'px'; // console.log（lib.page.page.domul.style.marginleft）; if（c> = lib.speed）; parsefloat（lib.page.domul.style.marginleft）> = 0）{if（parsefloat（lib.page.domul.domul.marginleft）> = 0）{lib.page.domul.style.marginLeft = '0px';} clearinterval（lib.page.previd）; n = 0; n <lib.page.previd.length; n ++）{// clearinterval（lib.page.previd [n]）; //}; // lib.page.previd = []; lib.page.index - ; lib.page.fals; lib.event.domupdate.call（this、lib、 'l'）; if （lib.page.moveid.length == 0）{lib.event.start（lib、lib）;}}}、5）;}、move：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（parsefloat（parsefloat（lib.page.domul.style.marginleft））-math.abs（lib.page.bodywid* 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.marginLeft）-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.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（this、lib）;}}、domupdate：function（lib、type）{if（lib.page.is.is.ddom; lib.isdomions.isddom = true; lib.isdome = true; lib.isdom = lib.page.lilist [lib.page.index] .getattribute（ 'index'）; lib.options.callback（{"index"：index（index）+1}）; lib.page.isdom = fals; 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; // crowle.log（lib.page.index）var index = lib.page.lilist [lib.page.index] .getattribute（ 'index'）; lib.options.callback（{"index"：parseint（index）+1}）; lib.page.isdom;} function（arg）{for（this.optionsのvar i）{this.options [i] = arg [i]！== undefined？ arg [i]：this.options [i];} if（！device）{this.eventname.touchstart = 'mousedown'; this.eventname.touchmove = 'mousemove'; thiventname.touchend = 'mouseup';} // return temp;}、bindevent：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（）;}、document = fals. this.page.lilist = this.options.dom.getelementsbytagname（ 'li'）; this.page.domul = this.options.dom.dom.dom.bytagname（ 'ul'）[0]; this.tyle.width = this.page.bodywidth+'px'; for（var i = 0; i <this.page.lilist.linist; i ++）{var item = this.page.lilist [i]; var img = item.getelementsbytagname（ 'img'）; item.setattribute（ 'index'、i）; item.style.width = this.boidth+'px' 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））;} else {for（var i = 0; i <length; i ++）{this.page.domul.appendchild（this.page.lilist [i] .clonenode（true）;} this.page.lilist = 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（this、this）;}、start： 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 = new wapimages = w.w.wapimages = new wapimage wapimage（）;};（function（）{if（d.body）{loaded（）;} else {if（d.adeventlistener）{d.addeventlistener（ 'domcontentloaded'、function（）{d.removeeventlistener（ 'domcontentener（' domcontentloded '、arguments.calle、false、false、false、false）; if（d.attachevent）{d.attachevent（ 'onreadystatechange'、function（）{if（d.readystate === 'complete'）{d.detachevent（ 'onreadeystatechange'、arguments.callee）; loaded（）;}}）;}}}}） = function（）{var obj = {dom：document.getElementById（ 'waplistimage'）、isupdate：true、time：3000、isfor：true、leftorright： 'left'、callback：function（obj）{var span = document.getElementById（ 'waplistimage'） console.log（obj.index）}}; wapimage.start（obj）; wapimage.position（2）var obj2 = {dom：document.getelementbyid（ 'waplistimage1'）、callback：function（obj）{// console.log（obj.log.log）}}; w.wapimage（）; // img.start（obj）;} </script> </body> </html>使用法：
ページの読み込みが完了した後
var obj = {dom：document.getElementbyid（ 'waplistimage'）、// dom element isupdate：true、//それは自動的に切り替えられますか？右のコールバックの左または自動スイッチング：function（obj）{//スイッチの正常に、コールバック関数は実際に現在の画像へのインデックスパラメーターを持っています// bar span = document.getelementbyid（ 'waplistimage'）。 0; k <span.length; k ++）{span [k] .classname = '';} span [obj.index-1] .classname = 'selected' // 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（）