轮播图（手动版)M端 PC都支持

Posted 2020-10-06 照世明灯

码上

支持左右、上下划动

 

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&&reg.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;
         }        

    效果-- 

来来来、划动你的鼠标 --跟着我的节奏一起摇摆   ~~（循环模式、左右滑动模式）请自已尝试--支持手机哦