iSlider手机端图片滑动切换插件使用详解
自适应轮播图，支持手机触屏滑动，三种切换效果。
效果图：
js：
variSlider=function(opts){
if(!opts.dom){
thrownewError("domelementcannotbeempty!");
}
if(!opts.data||!opts.data.length){
thrownewError("datamustbeanarrayandmusthavemorethanoneelement!");
}
this._opts=opts;
this._setting();
this._renderHTML();
this._bindHandler();
};
iSlider.prototype._setting=function(){
varopts=this._opts;
this.wrap=opts.dom;
this.data=opts.data;
this.type=opts.type||'pic';
this.isVertical=opts.isVertical||false;
this.onslide=opts.onslide;
this.onslidestart=opts.onslidestart;
this.onslideend=opts.onslideend;
this.onslidechange=opts.onslidechange;
this.duration=opts.duration||4000;
this.log=opts.isDebug?
function(str){
console.log(str)
}:function(){};
this.axis=this.isVertical?'Y':'X';
this.width=this.wrap.clientWidth;
this.height=this.wrap.clientHeight;
this.ratio=this.height/this.width;
this.scale=opts.isVertical?this.height:this.width;
this.sliderIndex=this.sliderIndex||0;
if(this.data.length<2){
this.isLooping=false;
this.isAutoPlay=false;
}else{
this.isLooping=opts.isLooping||false;
this.isAutoplay=opts.isAutoplay||false;
}
if(this.isAutoplay){
this.play();
}
this._setUpDamping();
this._animateFunc=(opts.animateTypeinthis._animateFuncs)?this._animateFuncs[opts.animateType]:this._animateFuncs['default'];
this._setPlayWhenFocus();
};
iSlider.prototype._setPlayWhenFocus=function(){
varself=this;
window.addEventListener('focus',
function(){
self.isAutoplay&&self.play();
},
false);
window.addEventListener('blur',
function(){
self.pause();
},
false);
}
iSlider.prototype._animateFuncs={
'default':function(dom,axis,scale,i,offset){
dom.style.webkitTransform='translateZ(0)translate'+axis+'('+(offset+scale*(i-1))+'px)';
},
'rotate':function(dom,axis,scale,i,offset){
varrotateDirect=(axis=="X")?"Y":"X";
varabsoluteOffset=Math.abs(offset);
varbdColor=window.getComputedStyle(this.wrap.parentNode,null).backgroundColor;
if(this.isVertical){
offset=-offset;
}
this.wrap.style.webkitPerspective=scale*4;
if(i==1){
dom.style.zIndex=scale-absoluteOffset;
}else{
dom.style.zIndex=(offset>0)?(1-i)*absoluteOffset:(i-1)*absoluteOffset;
}
dom.style.backgroundColor=bdColor||'#333';
dom.style.position='absolute';
dom.style.webkitBackfaceVisibility='hidden';
dom.style.webkitTransformStyle='preserve-3d';
dom.style.webkitTransform='rotate'+rotateDirect+'('+90*(offset/scale+i-1)+'deg)translateZ('+(0.888*scale/2)+'px)scale(0.888)';
},
'flip':function(dom,axis,scale,i,offset){
varrotateDirect=(axis=="X")?"Y":"X";
varbdColor=window.getComputedStyle(this.wrap.parentNode,null).backgroundColor;
if(this.isVertical){
offset=-offset;
}
this.wrap.style.webkitPerspective=scale*4;
if(offset>0){
dom.style.visibility=(i>1)?'hidden':'visible';
}else{
dom.style.visibility=(i<1)?'hidden':'visible';
}
dom.style.backgroundColor=bdColor||'#333';
dom.style.position='absolute';
dom.style.webkitBackfaceVisibility='hidden';
dom.style.webkitTransform='translateZ('+(scale/2)+'px)rotate'+rotateDirect+'('+180*(offset/scale+i-1)+'deg)scale(0.875)';
},
'depth':function(dom,axis,scale,i,offset){
varrotateDirect=(axis=="X")?"Y":"X";
varzoomScale=(4-Math.abs(i-1))*0.15;
this.wrap.style.webkitPerspective=scale*4;
if(i==1){
dom.style.zIndex=100;
}else{
dom.style.zIndex=(offset>0)?(1-i):(i-1);
}
dom.style.webkitTransform='scale('+zoomScale+','+zoomScale+')translateZ(0)translate'+axis+'('+(offset+1.3*scale*(i-1))+'px)';
},
'tear':function(dom,axis,scale,i,offset){
varrotateDirect=(axis=="X")?"Y":"X";
varzoomScale=1-(Math.abs(i-1)*0.2);
this.wrap.style.webkitPerspective=scale*4;
if(i==1){
dom.style.zIndex=100;
}else{
dom.style.zIndex=(offset>0)?(1-i):(i-1);
}
dom.style.webkitTransform='scale('+zoomScale+','+zoomScale+')translateZ(0)translate'+axis+'('+(offset+scale*(i-1))+'px)';
}
}
iSlider.prototype._setUpDamping=function(){
varoneIn2=this.scale>>1;
varoneIn4=oneIn2>>1;
varoneIn16=oneIn4>>2;
this._damping=function(distance){
vardis=Math.abs(distance);
varresult;
if(dis>1;
}elseif(dis>2);
}else{
result=oneIn4+oneIn16+((dis-oneIn2-oneIn4)>>3);
}
returndistance>0?result:-result;
};
};
iSlider.prototype._renderItem=function(i){
varitem,html;
varlen=this.data.length;
if(!this.isLooping){
item=this.data[i]||{
empty:true
};
}else{
if(i<0){
item=this.data[len+i];
}elseif(i>len-1){
item=this.data[i-len];
}else{
item=this.data[i];
}
}
if(item.empty){
return'';
}
if(this.type==='pic'){
html=item.height/item.width>this.ratio?'':'';
}elseif(this.type==='dom'){
html='https://www.haoziyuan.cchttps://www.haoziyuan.cc'+item.content+' ';
}elseif(this.type==='overspread'){
html=this.ratio<1?'
':'
';
}
returnhtml;
};
iSlider.prototype._renderHTML=function(){
varouter;
if(this.outer){
this.outer.innerHTML='';
outer=this.outer;
}else{
outer=document.createElement('ul');
}
outer.style.width=this.width+'px';
outer.style.height=this.height+'px';
this.els=[];
for(vari=0;i<3;i++){
varli=document.createElement('li');
li.style.width=this.width+'px';
li.style.height=this.height+'px';
this._animateFunc(li,this.axis,this.scale,i,0);
this.els.push(li);
outer.appendChild(li);
if(this.isVertical&&(this._opts.animateType=='rotate'||this._opts.animateType=='flip')){
li.innerHTML=this._renderItem(1-i+this.sliderIndex);
}else{
li.innerHTML=this._renderItem(i-1+this.sliderIndex);
}
}
if(!this.outer){
this.outer=outer;
this.wrap.appendChild(outer);
}
};
iSlider.prototype._slide=function(n){
vardata=this.data;
varels=this.els;
varidx=this.sliderIndex+n;
if(data[idx]){
this.sliderIndex=idx;
}else{
if(this.isLooping){
this.sliderIndex=n>0?0:data.length-1;
}else{
n=0;
}
}
this.log('picidx:'+this.sliderIndex);
varsEle;
if(this.isVertical&&(this._opts.animateType=='rotate'||this._opts.animateType=='flip')){
if(n>0){
sEle=els.pop();
els.unshift(sEle);
}elseif(n<0){
sEle=els.shift();
els.push(sEle);
}
}else{
if(n>0){
sEle=els.shift();
els.push(sEle);
}elseif(n<0){
sEle=els.pop();
els.unshift(sEle);
}
}
if(n!==0){
sEle.innerHTML=this._renderItem(idx+n);
sEle.style.webkitTransition='none';
sEle.style.visibility='hidden';
setTimeout(function(){
sEle.style.visibility='visible';
},
200);
this.onslidechange&&this.onslidechange(this.sliderIndex);
}
for(vari=0;i<3;i++){
if(els[i]!==sEle){
els[i].style.webkitTransition='all.3sease';
}
this._animateFunc(els[i],this.axis,this.scale,i,0);
}
if(this.isAutoplay){
if(this.sliderIndex===data.length-1&&!this.isLooping){
this.pause();
}
}
};
iSlider.prototype._bindHandler=function(){
varself=this;
varscaleW=self.scaleW;
varouter=self.outer;
varlen=self.data.length;
varstartHandler=function(evt){
self.pause();
self.onslidestart&&self.onslidestart();
self.log('Event:beforeslide');
self.startTime=newDate().getTime();
self.startX=evt.targetTouches[0].pageX;
self.startY=evt.targetTouches[0].pageY;
vartarget=evt.target;
while(target.nodeName!='LI'&&target.nodeName!='BODY'){
target=target.parentNode;
}
self.target=target;
};
varmoveHandler=function(evt){
evt.preventDefault();
self.onslide&&self.onslide();
self.log('Event:onslide');
varaxis=self.axis;
varoffset=evt.targetTouches[0]['page'+axis]-self['start'+axis];
if(!self.isLooping){
if(offset>0&&self.sliderIndex===0||offset<0&&self.sliderIndex===self.data.length-1){
offset=self._damping(offset);
}
}
for(vari=0;i<3;i++){
varitem=self.els[i];
item.style.webkitTransition='all0s';
self._animateFunc(item,axis,self.scale,i,offset);
}
self.offset=offset;
};
varendHandler=function(evt){
evt.preventDefault();
varboundary=self.scale/2;
varmetric=self.offset;
varendTime=newDate().getTime();
boundary=endTime-self.startTime>300?boundary:14;
if(metric>=boundary){
self._slide(-1);
}elseif(metric<-boundary){
self._slide(1);
}else{
self._slide(0);
}
self.isAutoplay&&self.play();
self.offset=0;
self.onslideend&&self.onslideend();
self.log('Event:afterslide');
};
varorientationchangeHandler=function(evt){
setTimeout(function(){
self.reset();
self.log('Event:orientationchange');
},
100);
};
outer.addEventListener('touchstart',startHandler);
outer.addEventListener('touchmove',moveHandler);
outer.addEventListener('touchend',endHandler);
window.addEventListener('orientationchange',orientationchangeHandler);
};
iSlider.prototype.reset=function(){
this.pause();
this._setting();
this._renderHTML();
this.isAutoplay&&this.play();
};
iSlider.prototype.play=function(){
varself=this;
varduration=this.duration;
clearInterval(this.autoPlayTimer);
this.autoPlayTimer=setInterval(function(){
self._slide(1);
},
duration);
};
iSlider.prototype.pause=function(){
clearInterval(this.autoPlayTimer);
};
iSlider.prototype.extend=function(plugin){
varfn=iSlider.prototype;
Object.keys(plugin).forEach(function(property){
Object.defineProperty(fn,property,Object.getOwnPropertyDescriptor(plugin,property));
})
}
iSlider.prototype.extend({
bindMouse:function(){
varself=this;
varscaleW=self.scaleW;
varouter=self.outer;
varlen=self.data.length;
varbDrag=false;
varmouseStart=function(evt){
bDrag=true;
self.pause();
self.onslidestart&&self.onslidestart();
self.startTime=newDate().getTime();
self.startX=evt.clientX;
self.startY=evt.clientY;
vartarget=evt.target;
while(target.nodeName!='LI'&&target.nodeName!='BODY'){
target=target.parentNode;
}
self.target=target;
};
varmouseMove=function(evt){
if(bDrag){
evt.preventDefault();
self.onslide&&self.onslide();
varaxis=self.axis;
varoffset=evt['client'+axis]-self['start'+axis];
if(!self.isLooping){
if(offset>0&&self.sliderIndex===0||offset<0&&self.sliderIndex===self.data.length-1){
offset=self._damping(offset);
}
}
for(vari=0;i<3;i++){
varitem=self.els[i];
item.style.webkitTransition='all0s';
self._animateFunc(item,axis,self.scale,i,offset);
}
self.offset=offset;
}
};
varmouseEnd=function(evt){
evt.preventDefault();
bDrag=false;
varboundary=self.scale/2;
varmetric=self.offset;
varendTime=newDate().getTime();
boundary=endTime-self.startTime>300?boundary:14;
if(metric>=boundary){
self._slide(-1);
}elseif(metric<-boundary){
self._slide(1);
}else{
self._slide(0);
}
self.isAutoplay&&self.play();
self.offset=0;
self.onslideend&&self.onslideend();
self.log('Event:afterslide');
};
outer.addEventListener('mousedown',mouseStart);
outer.addEventListener('mousemove',mouseMove);
outer.addEventListener('mouseup',mouseEnd);
}
})
html：
Document
*{
padding:0;
list-style:none;
margin:0;
}
/*容器高度*/
#iSlider-effect-wrapper{
height:400px;
width:500px;
margin:0auto;
margin-top:4.6rem;
overflow:hidden;
position:relative;
}
.iSlider-effectul{
list-style:none;
padding:0;
margin:0;
height:100%;
overflow:hidden
}
.iSlider-effectli{
position:absolute;
margin:0;
padding:0;
height:100%;
overflow:hidden;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
list-style:none
}
.iSlider-effectulliimg{
max-width:100%;
max-height:100%;
margin:0;
padding:0
}
.iSlider-effectdiv{
background-color:#fff;
padding:3px
}
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
