There are many such examples on the Internet, but they all use other components to make the code confusing; there is also the use of transform in css3: translate(x,y); mobile elements, but I found that it was almost done on devices that do not support css3, so I decided to make one by myself. Unexpectedly, many problems arise. The most important one is to link the picture. The up and down scroll bars in the web page cannot scroll when dragging the picture, and it is not compatible with dragging on the PC machine. Here I will briefly introduce the problems encountered and solutions;
Question 1: After adding a link to the image, it always jumps to other pages when dragging it
The main reason for the problem is that it is impossible to determine whether to click or drag. The general order of mobile phone events is touchstart-》mousedown-》mousemove-》mouseup-》touchend-》click. It may vary depending on the phone. Touchstart -》 touchmove -》 touchend -》 click event is executed last. When we have touchstart, touchmove, touchend, and touchend process, if we do not return or cancel the default, the click event will be triggered, so the web page will jump away. The solution is to record the coordinate points of touchstart and touchmove, and calculate whether the contact has moved through based on the two coordinate points. Among them, what is worth paying attention to is the Event parameters of the event. The touch screen is generally event.touches, event.targetTouches, event.changedTouches. I found the values of the three parameters in the test. However, it is worth noting that the touchend event will not get the contact coordinates (or perhaps a device problem). Touchmove will continue to set off when moving. Sometimes touchmove will not trigger. The browser comes with a function to remove the contact (or mouse) from the selected element. For example, pressing and holding it on time will appear, (the picture on the pc will generate a dragged thumbnail). In this way, event.preventDefault(); cancel the default when touchstart (mousedown).
Question 2: The up and down scroll bars in the web page cannot scroll when dragging the picture
I believe that this problem will be encountered as long as it is done. In fact, the default event.preventDefault() is cancelled when moving (touchmove, mousemove). What we need to do here is whether the contacts are moved and whether the contacts are consistent with the beginning. If they are consistent, they will return directly. It also needs to calculate whether the x-axis is moved a little more or the y-axis is moved a little more. In this way, we can cancel the default when sliding left and right, and not cancel it when going to school;
Question 3: And it is not compatible with dragging on the PC machine
This is because when binding events, you cannot fully consider whether the event name is touchstart or mousedown. I searched online and felt that I didn’t do it, so I copied it directly.
this.eventName={touchstart:'touchstart',touchmove:'touchmove',touchend:'touchend',} is making judgments if(!device){this.eventName.touchstart='mousedown';this.eventName.touchmove='mousemove';this.eventName.touchend='mouseup';}dom.addEventListener(this.eventName.touchstart,handleEvent,false);This is probably what it means to bind different events according to different devices.
Actually, I have encountered many problems, so I won't explain them one by one
I won't say much, just post the code. If there is anything bad, please include and give more opinions
<!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="telephone=no" name="format-detection" /><title></title><style type="text/css">html,body,*{ margin: 0; padding: 0; border: 0;}#wapListImage1, #wapListImage{width: 100%; overflow: hidden; height: auto; cursor: move; 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; bottom: 10px; right: 0;}#wapListImage dl span{overflow: hidden;width: 10px; height: 10px; background-color: #900; display: 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)" 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><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" 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="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/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.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" rel="external nofollow" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.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" 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="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/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 id="wapListImage1"><ul><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" rel="external nofollow" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.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" 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="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/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li></ul></div><script type="text/javascript">;(function(w,d){var device = (/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: 0,flag: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 : 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.sTime=lib.page.eTime=new 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 = 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 event.preventDefault(); lib.page.domUL.style.marginLeft=lib.page.mleft-changeX+'px';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';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{//Long press or click}break;case "mouseup":case "touchend":if(!lib.page.isDown) return;lib.page.eTime=new Date().getTime();lib.page.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)) {//Left and left events 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);}else{//Long press or click if((lib.page.eTime - lib.page.sTime) > 300) {//Long press}else{//Click 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.isDown=false;break;default:break;}},position: function(lib,index){// if(index==undefined){// lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';// }else{// lib.page.domUL.style.marginLeft= -(index*lib.page.bodyWidth) +'px';// lib.page.index=index;// }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)*lib.page.bodyWidth) +'px';lib.page.index=index-1;}lib.options.callBack({"index":parseInt(lib.page.liList[lib.page.index].getAttribute('index'))+1});}else{if(index==undefined){lib.page.domUL.style.marginLeft= -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.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);}},next:function(lib){// 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.options.speed;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);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(){// lib.Event.stop(lib,lib);// 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.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=lib.page.nextId.length;n++){// clearInterval(lib.page.nextId[0]);// }// lib.page.nextId=[];lib.page.index++;lib.page.flag=false;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]);// }clearInterval(lib.page.nextId);lib.page.nextId=null;// 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)while(true){if(yu==0){yu=lib.page.bodyWidth;break;}else 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);clearInterval(lib.page.prevId);lib.page.prevId = window.setInterval(function(){c=c+5;lib.page.domUL.style.marginLeft= (parseFloat(lib.page.domUL.style.marginLeft)+left*5)+'px';// console.log(lib.page.domUL.style.marginLeft);if(c>=lib.options.speed || parseFloat(lib.page.domUL.style.marginLeft)>=0){if(parseFloat(lib.page.domUL.style.marginLeft)>=0){lib.page.domUL.style.marginLeft='0px';}clearInterval(lib.page.prevId);// for (var 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(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(Math.abs(parseFloat(lib.page.domUL.style.marginLeft))-Math.abs(lib.page.bodyWidth*lib.page.index))h = 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) +'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.domUL.style.marginLeft= -(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(this,lib);}else if(lib.point.pageX2-lib.point.pageX1>0){// console.log("===")lib.Event.prev.call(this,lib);}},domUpdate: function(lib,type){if(lib.page.isdom) return;lib.page.isdom=true;if(!lib.options.isfor){var index = 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.domUL.insertBefore(lib.page.liList[lib. 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;}};};WapImage.prototype = {setoption: function(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';}//return temp;},bindEvent: function(){var lib = this; this.page.domUL.addEventListener(this.eventName.touchstart,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);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';for(var 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.bodyWidth+'px';img.style.width = 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 WapImage();w.WapImages=new WapImage();};(function(){if(d.body){loaded();}else{if(d.addEventListener){d.addEventListener( 'DOMContentLoaded', function(){d.removeEventListener( 'DOMContentLoaded', arguments.callee, false );loaded();}, false );}else if(d.attachEvent){d.attachEvent( 'onreadystatechange', function(){if( d.readyState === 'complete' ){d.detachEvent( 'onreadystatechange', arguments.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].className='selected'// console.log(obj.index)}};WapImage.start(obj);WapImage.position(2)var obj2 = {dom:document.getElementById('wapListImage1'), callBack:function(obj){// console.log(obj.index)}};WapImages.start(obj2);// var img = new w.WapImage();// img.start(obj);}</script></body></html>usage:
After the page loading is complete
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 the left or automatic switching on the right callBack:function(obj){//After the switch successfully, the callback function actually has the index parameter to the current picture //handle it yourself 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].className='selected'// console.log(obj.index)}};WapImage.start(obj);WapImage.position(2)If one does not need multiple image switching effects, you can find var loaded=function() in the code.
Define the number of pictures you need to switch and set the name
like
w.WapImage=new WapImage();
w.WapImages=new WapImage();
You can call it directly after the page is loaded
WapImage.start() and WapImages.start()