移動端無縫滾動兼拖動插件

時間 2019-11-10

標籤移動無縫滾動拖動插件欄目無線简体版

原文原文鏈接

需求分析：html

一、無縫滾動web

二、觸摸拖動ide

先上html代碼：函數

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>圖片點擊滑動</title>
        <style>
            body{padding: 0;margin: 0;}
            li,ol,ul{margin: 0;list-style: none;padding: 0;}
            div#l-btn{left: 0;color: gray;}
            div#r-btn{right: 0;color:brown;cursor: pointer;}
            .nav-container{position: relative;width: 98%;height:10em;overflow: hidden;margin: 2em auto;}
            .nav{position: absolute;top: 0;left:0;}
            .nav li{float: left;width:8em;text-align: center;}
            .nav li img{width: 100%;height: auto;}
            .nav span{font-size: 1.6em;}
        </style>
    </head>
    <body>            
        <div class="nav-container">
            <ul class="nav" id="nav">                 
                 <li><img src="img/hb1.jpg" /><br/><span>1</span></li>
                 <li><img src="img/hb2.jpg" /><br/><span>2</span></li>
                 <li><img src="img/hb3.jpg" /><br/><span>3</span></li>
                 <li><img src="img/hb4.jpg" /><br/><span>4</span></li>     
                 <li><img src="img/hb2.jpg" /><br/><span>5</span></li>
                 <li><img src="img/hb3.jpg" /><br/><span>6</span></li>
                 <li><img src="img/hb4.jpg" /><br/><span>7</span></li>     
                 <li><img src="img/hb2.jpg" /><br/><span>8</span></li>
             </ul>
        </div>
    </body>
</html>

無縫滾動的原理呢，就是把ul容器內的所有li標籤clone追加到後面，來來來，獻上醜圖分析一下：this

當它自右向左滾動的距離大於紅框寬度的一半的時候，咱們就讓它的tanslateX=0;由於此處恰好跟初始位置重疊，因此當咱們還原到初始位移爲0的時候就不會出現跳躍感了。spa

代碼：prototype

var UcanSlide=function(ele,config){
    this.config=config||{};
    this.wrap=document.querySelector(ele);
    this.ul_wrap=this.wrap.querySelector('ul');
    this.ul_wrap.innerHTML+=this.ul_wrap.innerHTML;
    this.oli=this.ul_wrap.querySelectorAll('li');
    this.len=this.oli.length;                    
    this.marginRight=this.config.marginRight||15;//設置li標籤的右邊距
    this.autoScroll=this.config.autoScroll||true;//設置容器的滾動狀態
    this.scrollStep=this.config.scrollSpeed||2;//設置容器滾動的步長
    this.setTime = null;
    this.warp_width=this.wrap.offsetWidth;
    this.ul_wrap_width=0;                        
    this.init();                    
}
UcanSlide.prototype.init=function(){
    var _this=this;                    
    for(var i=0;i<this.len;i++){
        this.oli[i].style.marginRight=this.marginRight+'px';
        this.ul_wrap_width+=(this.oli[i].offsetWidth+this.marginRight);
    }
    this.ul_wrap.style.width=this.ul_wrap_width+'px';
    if(this.ul_wrap_width<this.warp_width){
        return;
    }
    if(this.autoScroll){
         //執行無縫滾動
         this.setTime=setInterval(function(){
         　　_this.move();
         },this.scrollSpeed);
    }                      
}

　UcanSlide.prototype.move=function(){
　　　　if(this.autoScroll){
　　　　　　//自由滾動狀態（自右向左）
　　　　　　this.dirX=this.dirX-this.scrollStep;
　　　　　　if(this.dirX<-this.ul_wrap_width/2||this.dirX>0){
　　　　　　　　this.dirX=0;
　　　　　　}
　　　　}else{scala

　　　　　　//拖動狀態3d

　　　　　　if(this.dirX<-this.ul_wrap_width/2){code

　　　　　　　　this.dirX=0;
　　　　　　}else if(this.dirX>=0){
　　　　　　　　this.dirX=-this.ul_wrap_width/2;
　　　　　　}
　　　　}

　　　　this.ul_wrap.style.webkitTransform='translate3d('+this.dirX+'px,'+'0px,0px)';

　};

new UcanSlide('.nav-container');

無縫滾動部分差很少就是這樣子了，如今再加上一個需求，就是當手指放在滾動部分時，能夠拖動，手指離開時滾動繼續。

此時，咱們須要作的就是記錄當前移動的位移：this.dirX；

註冊touchstar、touchmove和touchend事件。

//在init()函數裏面添加
this.ul_wrap.addEventListener('touchstart',function(e){
     _this.touchStart(e);            
},false);
this.ul_wrap.addEventListener('touchmove',function(e){                        
     _this.touchMove(e);
},false);
this.ul_wrap.addEventListener('touchend',function(e){
     _this.touchEnd(e);
},false);

touchStart()：主要功能就是清除循環滾動的計時器和記錄手指當前觸摸屏的x座標；

UcanSlide.prototype.touchStart=function(e){                    
      e.preventDefault();
      clearInterval(this.setTime);
     this.startX=e.targetTouches[0].clientX;
};

touchMove()：累加每次移動的位移

UcanSlide.prototype.touchMove=function(e){
    e.preventDefault();
    this.autoScroll=false;
    this.dirX+=e.targetTouches[0].clientX-this.startX;
    this.startX=e.targetTouches[0].clientX;//記錄前一次觸屏座標
    this.move();
};

touchEnd()：手指離開後開始滾動

UcanSlide.prototype.touchEnd=function(e){
    var _this=this;
    this.autoScroll=true;
    this.setTime=setInterval(function(){
        _this.move();
    },this.scrollSpeed);
};

最後調用，傳入容器的class或者id均可以。