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, there were many problems, among which the most important one was 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 events are generally used for touchstart -》 touchmove -》 touchend -》 click event is executed last. When we have touchstart, touchmove, 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 according to the two coordinate points. Among them, what is worth paying attention to is the Event parameter of the event, and the touchscreen is generally ,. 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, you must first (); 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 () is cancelled when moving (touchmove, mousemove). What we need to do here is whether the contacts and the starting contact are consistent. If they are consistent, they will return directly. It also needs to calculate whether the x-axis is more moving or the y-axis is more moving. 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.
={
touchstart:'touchstart',
touchmove:'touchmove',
touchend:'touchend',
}
Making judgment
if(!device){
='mousedown';
='mousemove';
='mouseup';
}
(,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 { background-color: #000;}
</style>
</head>
<body>
<div >
<div >
<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="/M00/37/74/."></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="/M00/F2/06/."></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="/M00/2B/EE/."></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" target="_black"><img src="/M00/37/74/."></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="/M00/F2/06/."></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="/M00/2B/EE/."></a></li> -->
</ul>
<dl>
<span class="selected">1</span>
<span>2</span>
<span>3</span>
<!-- <span>4</span>
<span>5</span>
<span>6</span> -->
</dl>
</div>
</div>
<div style="height:200px;"></div>
<div >
<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="/M00/37/74/."></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="/M00/F2/06/."></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="/M00/2B/EE/."></a></li>
</ul>
</div>
<script type="text/javascript">
;(function(w,d){
var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/(()));
function WapImage(){
={
dom: null,
speed:200,
isupdate:true,
time:3000,
leftOrright:'left',
isfor:false,
callBack:function(){}
},
={
touchstart:'touchstart',
touchmove:'touchmove',
touchend:'touchend',
},
={
x:5,
y:5,
pageX1:0,
pageX2:0,
pageY1:0,
pageY2:0
},
={
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
},
={
handleEvent: function(event,lib){
event = event ? event : ;
// ()
switch(){
case "touchstart":
var touch = [0];
case "mousedown":
if() return;
=true;
==new Date().getTime();
(lib,lib);
if(=="mousedown"){
touch = event;
();
}
.pageX1 = .pageX2 = ;
.pageY1 = .pageY2 = ;
= parseFloat();
= ? : 0;
break;
case "touchmove":
var touch = [0];
case "mousemove":
if(!) return;
if(=="mousemove"){
touch = event;
}
.pageX2 = ;
.pageY2 = ;
if(.pageX1==.pageX2){
();
return false;
}
var changeX = .pageX1 - .pageX2;
var changeY = .pageY1 - .pageY2;
if((changeX)>(changeY)) {//Other and left events();
=-changeX+'px';
if(parseFloat()<= -(-1)*){
= -(-1)*+'px';
=-(-1)*;
}
if(parseFloat()>0){
='0px';
=0;
}
}else if((changeY)>(changeX)){//Update events
}else{//Long press or click
}
break;
case "mouseup":
case "touchend":
if(!) return;
=new Date().getTime();
= parseFloat();
= ? : 0;
var changeX = .pageX1 - .pageX2;
var changeY = .pageY1 - .pageY2;
if((changeX)>(changeY)) {//Other and left events
();
(this,lib);
}else if((changeY)>(changeX)){//Update events(this,lib);
}else{//Long press or clickif(( - ) > 300) {//Long press}else{//Clickif(==0 || =='touchend'){
var a = [].getElementsByTagName('a')[0];
if(typeof ('target')=='object'){
=('hrefto')
}else{
(('hrefto'));
}
}
}
}
=false;
break;
default:
break;
}
},
position: function(lib,index){
// if(index==undefined){
// = -(*) +'px';
// }else{
// = -(index*) +'px';
// =index;
// }
if(!){
if(index==undefined){
= -(*) +'px';
}else{
= -((index-1)*) +'px';
=index-1;
}
({"index":parseInt([].getAttribute('index'))+1});
}else{
if(index==undefined){
= - +'px';
}else{
= - +'px';
while(true){
if(parseInt(index)==parseInt([1].getAttribute('index'))+1){
break;
}
([-1],[0]);
}
}
({"index":parseInt([1].getAttribute('index'))+1});
}
},
stop:function(lib){
for(var i =0;i<;i++){
clearInterval([i]);
}
=[];
},
start:function(lib){
if(){
[] = setInterval(function(){
if(=='left'){
(lib,lib);
}else{
(lib,lib);
}
},);
}
},
next:function(lib){
// (+"nextId")
// for (var n=0;n<;n++) {
// // clearInterval([n]);
// };
// =[];
clearInterval();
=null;
// var left = ((..pageX2))/;
var yu = (parseInt());
while(true){
if(yu==0){
yu=;
break;
}else if(yu<0){
yu= (yu);
break;
}
yu=
}
// var left = ((parseFloat()%))/;
var left = yu/;
var c = 0;
if(==-1){
=false;
return;
}
clearInterval();
= (function(){
// (lib,lib);
// if(==null){
// clearInterval(id);
// }
c=c+5;
= (parseFloat()-left*5)+'px';
// ("next"+);
if(c>= || parseFloat()<= -(-1)* ){
if(parseFloat()<= -(-1)*){
= -(-1)*+'px';
}
clearInterval();
// for(var n=0;n=;n++){
// clearInterval([0]);
// }
// =[];
++;
=false;
(this,lib,'r');
if(==0){
(lib,lib);
}
}
},5);
},
prev:function(lib){
// (+"nextId")
// for(var n=0;n=;n++){
// // clearInterval([0]);
// }
clearInterval();
=null;
// =[];
// var left = ((..pageX2))/;
// var left = ((parseFloat()%))/;
var yu = (parseInt());
// (yu+"----"+)
while(true){
if(yu==0){
yu=;
break;
}else if(yu<0){
yu= (yu);
break;
}
yu=
}
// var left = (-yu)/;
var left = yu/;
var c = 0,id;
if(==0){
=false;
return;
}
var ml = parseFloat();
clearInterval();
= (function(){
c=c+5;
= (parseFloat()+left*5)+'px';
// ();
if(c>= || parseFloat()>=0){
if(parseFloat()>=0){
='0px';
}
clearInterval();
// for (var n=0;n<;n++) {
// clearInterval([n]);
// };
// =[];
--;
=false;
(this,lib,'l');
if(==0){
(lib,lib);
}
}
},5);
},
move:function(lib){
if() return;
=true;
if((..pageX2)<){
var h = ((parseFloat())-(*))
h = h/70;
var hi = 0;
var hid;
hid = (function(){
if(.pageX2>.pageX1){
= (parseFloat() - h*5) +'px';
}else{
= (parseFloat() + h*5) + 'px';
}
hi=hi+5;
if(hi>=70){
clearInterval(hid);
= -(*) +'px';
=false;
}
},5);
return;
}
if(..pageX2>0){
(this,lib);
}else if(..pageX1>0){
// ("===")
(this,lib);
}
},
domUpdate: function(lib,type){
if() return;
=true;
if(!){
var index = [].getAttribute('index');
({"index":parseInt(index)+1});
=false;
return;
}
if(type=='l'){
([-1],[0]);
=-+'px';//(parseFloat()-)+'px';
//++;
}else if(type=='r'){
([0]);
=-+'px';//(parseFloat()+)+'px';
//--;
}
=1;
// ()
var index = [].getAttribute('index');
({"index":parseInt(index)+1});
=false;
}
};
};
= {
setoption: function(arg){
for(var i in ){
[i]= arg[i] !== undefined ? arg[i] : [i];
}
if(!device){
='mousedown';
='mousemove';
='mouseup';
}
//return temp;
},
bindEvent: function(){
var lib = this;
(,function(event){(lib,event,lib);},false);
(,function(event){(lib,event,lib);},false);
(,function(event){(lib,event,lib);},false);
('resize',function(){();},false);
},
init:function(){
=;
= ('li');
= ('ul')[0];
=+'px';
for(var i=0;i<;i++){
var item = [i];
var img = ('img')[0];
('index',i);
=+'px';
= +'px';
}
if(<3){
var length = ;
if(length==1){
([0].cloneNode(true));
([0].cloneNode(true));
}else{
for(var i=0;i<length;i++){
([i].cloneNode(true));
}
}
= ('li');
}
},
position:function(index){
(this,this,index);
},
next:function(){
(this,this);
},
prev:function(){
(this,this);
},
start: function(arg){
(arg);
();
();
();
(this,'l');
(this);
}
};
var loaded=function(){
=new WapImage();
=new WapImage();
};
(function(){
if(){
loaded();
}else{
if(){
( 'DOMContentLoaded', function(){
( 'DOMContentLoaded', , false );
loaded();
}, false );
}else if(){
( 'onreadystatechange', function(){
if( === 'complete' ){
( 'onreadystatechange', );
loaded();
}
});
}
}
})();
})(window,document,undefined);
= function(){
var obj = {
dom:('wapListImage'),
isupdate:true,
time:3000,
isfor:true,
leftOrright:'left',
callBack:function(obj){
var span = ('wapListImage').getElementsByTagName('dl')[0].getElementsByTagName('span');
for(var k = 0;k<;k++){
span[k].className='';
}
span[-1].className='selected'
// ()
}
};
(obj);
(2)
var obj2 = {
dom:('wapListImage1'),
callBack:function(obj){
// ()
}
};
(obj2);
// var img = new ();
// (obj);
}
</script>
</body>
</html>
usage:
After the page loading is complete
var obj = {
dom:('wapListImage'),//dom elementisupdate:true,// Whether to switch automaticallytime:3000,//The automatic switching time millisecondsisfor:true, //Whether to play it loop, that is, to the last picture, whether to directly transfer to the first picture, or to the first picture, to the last picture, directly transfer to the last pictureleftOrright:'left',//For example, the left side automatically switch or the right side automatically switchcallBack:function(obj){//The callback function after the switch is successful. In fact, the index parameter is the current picture.
//Do it yourselfvar span = ('wapListImage').getElementsByTagName('dl')[0].getElementsByTagName('span');
for(var k = 0;k<;k++){
span[k].className='';
}
span[-1].className='selected'
// ()
}
};
(obj);
(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
=new WapImage();
=new WapImage();
You can call it directly after the page is loaded
()and()