码上
支持左右、上下划动
css
.admin{width:500px;height:500px;background:#ee00ee;position:relative}
div.m{width:500px;height:500px;position:absolute;top:0;left:0;text-align:center}
div.m img{width:400px;height:400px;}
html
<div class="admin" id=‘wrapper‘ style="background:none">
<div class="m" data-m=‘0‘><img src="/img/a.jpg" alt="" /></div>
<div class="m" data-m=‘1‘><img src="/img/0.jpg" alt="" /></div>
<div class="m" data-m=‘2‘><img src="/img/3.jpg" alt="" /></div>
<div class="m" data-m=‘3‘><img src="/img/c.jpg" alt="" /></div>
<div class="m" data-m=‘4‘><img src="/img/d.jpg" alt="" /></div>
</div>
javascript
先引入这个构造方法
"use strict";
var PPT=function(d){
"use strict";
this.W=document.getElementById(d.id);
this.cname=d.cname;
this.c= ‘getElementsByClassName‘ in document?this.W.getElementsByClassName(this.cname):this.W.querySelectorAll(‘.‘+this.cname);
this.Le= this.c.length;
this.w=this.W.offsetWidth;
this.h=this.W.offsetHeight;
this.auto=typeof d.auto!=‘undefined‘?d.auto:!1;
this.loop=typeof d.loop!=‘undefined‘?d.loop:!1;
this.isV=typeof d.isV!=‘undefined‘?d.isV:!0;
this.na=window.navigator.userAgent.toLowerCase();
this.o=this.isV?‘pageY‘:‘pageX‘;
this.endvalue=this.isV?this.h:this.w;
this.args={loop:this.loop,auto:this.auto,isV:this.isV,ht:0,hm:0,L:!1,D:!1,dL:!1,dR:!1,previous:null,next:null,_this:null,size:this.Le,dom:this.c,I:0,N:0,P:0,pwidth:this.w,pheight:this.h,index:0,o:this.o,endvalue:this.endvalue}
this.fn=d.evEnd;
this.ps(this.fn);
};
PPT.prototype.dev=function(){
"use strict";
var et,reg=/(android)|(ios)|(ipad)|(iphone)|(xiaomi)/;et=‘ontouchstart‘ in document&®.test(this.na)?{d:true,t:‘touchstart‘,m:‘touchmove‘,e:‘touchend‘}:{d:false,t:‘mousedown‘,m:‘mousemove‘,e:‘mouseup‘}
return et;
};
PPT.prototype.layout=function(){
"use strict";
var position=this.isV?position=‘metrix(1,0,0,1,0,‘+this.h+‘)‘:‘metrix(1,0,0,1,‘+this.w+‘,0)‘;
for(var i=1;i<this.Le;i++){
this.c[i].style.webkitTransform=position;
this.c[i].style.transform=position;
this.c[i].style.display=‘none‘;
}
};
PPT.prototype.ps=function(fn){
"use strict";
this.layout();
this.args.extend=this.orient;this.args.find=this.sdom;this.args.setStyle=this.zpp;this.args.end=this.ends;this.args.touchEnd=arguments[0]||‘‘;
this.args.spa=‘-webkit-transform 0.3s ease-out‘;this.args.spb=‘transform 0.3s ease-out‘;
this.exe(this.at,this.mt,this.et,this.args);
};
PPT.prototype.at=function(e,d,a){
"use strict";
a.ht=d.d?e.targetTouches[0][a.o]:e[a.o];
a._this=a.find(e.target);
a.I=Number(a._this.dataset.m);
if(typeof a.old===‘undefined‘){
a.old=a._this;
}else if(!a.old.isEqualNode(a._this)){
a.old.style.display=‘none‘;
}
a.N=a.I+1;
a.P=a.I-1;
if(a.loop){
if(a.I<=0){
a.P=a.size-1;
a.N=a.I+1;
}else if(a.I>=a.size-1){
a.P=a.I-1;
a.N=0;
}
}else{
a.dR=a.dL=!1;
if(a.I===0){
a.dR=!0;
}else if(a.I===a.size-1){
a.dL=!0;
}
}
a.previous=a.dom[a.P];a.next=a.dom[a.N];
};
PPT.prototype.mt=function(e,d,a){
"use strict";
if(!a.ht)return;
a.hm=d.d?e.targetTouches[0][a.o]:e[a.o];
a.D=a.ht-a.hm>0?!0:!1;
if(a.D){if(a.dL)return;}else{if(a.dR)return;};
a.extend(e,a);
};
PPT.prototype.et=function(a){
"use strict";
if(a.hm===0)return;
if(a.D){if(a.dL)return;}else{if(a.dR)return;};
a.end(a)
a.touchEnd!==‘‘?a.touchEnd(a.index):null;
a.old=a._this;
a.ax=a.bx=a.ay=a.by=a.V=a.L=a.D=0;
};
PPT.prototype.orient=function(e,a){
var oD=0,nD=0,oL=0,bL=0,k=1;
a.D?(a.that=a.next,k=1):(a.that=a.previous,k=-1)
a.isV?(oD=a.hm-a.ht,nD=a.endvalue*k+oD):(oL=a.hm-a.ht,bL=a.endvalue*k+oL);
a.setStyle(a._this,{webkitTransform:‘matrix(1,0,0,1,‘+oL+‘,‘+oD+‘)‘,transform:‘matrix(1,0,0,1,‘+oL+‘,‘+oD+‘)‘,webkitTransition:‘‘,transition:‘‘});
a.setStyle(a.that,{webkitTransform:‘matrix(1,0,0,1,‘+bL+‘,‘+nD+‘)‘,transform:‘matrix(1,0,0,1,‘+bL+‘,‘+nD+‘)‘,webkitTransition:‘‘,transition:‘‘,display:‘block‘});
a.index=Number(a.that.dataset.m);
a.offset=a.isV?oD:oL;
};
PPT.prototype.ends=function(a){
var n={y:0,x:0,a:-1,b:1};
a.isV?(n.y=a.endvalue,n.x=0):(n.x=a.endvalue,n.y=0);
a.D?(n.a=1,n.b=-1):(n.a=-1,n.b=1);
if(Math.abs(a.offset)<=80){
n.x*=n.a;n.y*=n.a;
n.thisEnd=‘matrix(1,0,0,1,0,0)‘;
n.thatEnd=‘matrix(1,0,0,1,‘+n.x+‘,‘+n.y+‘)‘;
}else{
n.x*=n.b;n.y*=n.b;
n.thisEnd=‘matrix(1,0,0,1,‘+n.x+‘,‘+n.y+‘)‘;
n.thatEnd=‘matrix(1,0,0,1,0,0)‘;
}
a.setStyle(a._this,{webkitTransform:n.thisEnd,transform:n.thisEnd,webkitTransition:a.spa,transition:a.spb});
a.setStyle(a.that,{webkitTransform:n.thatEnd,transform:n.thatEnd,webkitTransition:a.spa,transition:a.spb});
};
PPT.prototype.exe=function(an,mn,en,args){
"use strict";
var eve=this.dev(),t=false;
function st(e){
e.preventDefault();
t=true;
an.call(this,e,eve,args);
}
function sm(e){
e.preventDefault();
if(!t)return;
mn.call(this,e,eve,args);
}
function se(e){
t=false;
en.call(this,args);
}
this.W.addEventListener(eve.t,st);
this.W.addEventListener(eve.m,sm);
this.W.addEventListener(eve.e,se);
};
PPT.prototype.sdom=function(target){
"use strict";
var b=true,c=target;
while(b){
if(c.hasAttribute(‘data-m‘)){
b=false;
return c;
}else{
c= c.parentNode;
b=true;
}
}
};
PPT.prototype.zpp=function(o,k){
"use strict";
for(var i in k){
o.style[i]=k[i];
}
};
调用
new PPT({
id:‘wrapper‘, //容器
name:‘m‘, //className
isV:true, //是否上下划动
loop:false, //是否循环
evEnd:function(index){
//索引值
console.log(index);
}
});
document.ondragstart=function(e){
var ev = e||window.event;
ev.preventDefault()
return false;
}
效果--
（循环模式、左右滑动模式）请自已尝试--支持手机哦
时间： 2024-10-07 06:13:50