快捷導(dǎo)航

JavaScript實現(xiàn)移動端輪播效果

更新時間：2017年06月06日 09:27:16 作者：叫我小紅依吧

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)移動端輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

這個輪播代碼不是我自己所寫，是偶然游覽一個簡友的主頁看到的，今天剛看了事件，決定來逐行分析一下這個代碼。首先，移動端與電腦端不同的是移動端只能通過觸摸和手勢來發(fā)生行為，所以我們要用到j(luò)s中的與觸摸操作有關(guān)的新事件。其實我們輪播的原理和以前相同，都是通過改變元素的位置來控制圖片的出現(xiàn)，但讓我們不是很上手的，是那些用于跟蹤觸摸的屬性。

下面，我簡單介紹一下與觸摸相關(guān)的知識

觸摸事件

touchstart：當手指觸摸屏幕時觸發(fā)，一只手指放在屏幕上也會觸發(fā)
touchmove：當手指在屏幕上滑動時連續(xù)觸發(fā)。在這個事件發(fā)生期間可以用preventDefault()可以阻止?jié)L動。
touchend：手指從屏幕移開時觸發(fā)。
touchcancel：當系統(tǒng)停止跟蹤觸發(fā)時觸發(fā)。

上面這幾個事件都會冒泡，也都可以取消。

屬性

touches:表示當前跟蹤的觸摸操作的Touch對象的數(shù)組
targetTouches:特定于事件目標的Touch對象的數(shù)組。（簡單點可以理解為手指觸摸屏幕的位置）
changeTouches表示自上次觸摸以來發(fā)生了什么改變的touch對象的數(shù)組。（手指離開的位置）

每個touch對象包括下列屬性

clientX:觸摸目標在視口中的x坐標
clientY:觸摸目標在視口中的y坐標
identifier:標識觸摸的唯一ID
pageX:觸摸目標在頁面中的x坐標
pageY:觸摸目標在頁面中的y坐標
screenX:觸摸目標在頁面中的x坐標
screenY:觸摸目標在頁面中的y坐標
target:觸摸的dom節(jié)點目標

代碼如下

<!DOCTYPE html>
<html>
<head>
 <title>移動端輪播</title>
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }
  #box {
   width: 980px;
   overflow: hidden;
   position: relative;
   margin: 0 auto;
  }
  #box ul {
   width: 4900px;
   height: 100px;
   position: relative;
   transform: translateX(-980px);
   
  }
  #box ul li{
   width: 980px;
   height: 100px;
   float: left;
   list-style-type: none;
   text-align: center;
   color: #fff;
   line-height: 100px;
   font-size: 30px;
  }
 </style>
 <script type="text/javascript">
  window.onload = function() {
   var box = document.getElementById('box');
   var oUl = document.getElementsByTagName('ul')[0];
   var aLi = oUl.children;//這樣就可以把所有l(wèi)i標簽獲取到了
   var iNow = 1;
   var x = -iNow*aLi[0].offsetWidth;//li標簽的位置
   var bReady = true;
   oUl.addEventListener('touchstart',function(ev){

    //當手指觸摸屏幕的時候觸發(fā)事件，讓li的位置隨手指滑動而改變
    if(bReady == false){return;}
    bReady = false; 
      
    var downX = ev.targetTouches[0].pageX; //記錄觸摸位置 
    var disX = downX - x;//下一個li要移動到的位置
    function fnMove(ev) {
     x = downX-disX;
     oUl.style.transform = 'translate3d('+x+'px,0,0)';
    }
    function fnEnd(ev){
     var upX = ev.changedTouches[0].pageX;//離開的位置
     if(Math.abs(upX - downX)>50){
      //左邊移動
      if(upX - downX<0){
       iNow++;
       if(iNow==aLi.length){iNow=aLi.length-1;}
      }else{
      //右邊移動
       iNow--;
       if(iNow==-1){iNow=0;}
      }
     }
     x = -iNow*aLi[0].offsetWidth;
     oUl.style.transform = 'translate3d('+x+'px,0,0)';
     oUl.style.transition = '200ms all ease';
     function tEnd(){
      if(iNow==4){
       iNow=1;
      }
      if(iNow==0){iNow=3;}
      oUl.style.transition = 'none'
      x = -iNow*aLi[0].offsetWidth;
      oUl.style.transform = 'translate3d('+x+'px,0,0)';
      bReady = true;
     } 
     oUl.addEventListener('transitionend',tEnd,false);
     //釋放內(nèi)存
     document.removeEventListener('touchend',fnEnd,false);
     document.removeEventListener('touchmove',fnMove,false);

    }
    document.addEventListener('touchmove',fnMove,false);
    document.addEventListener('touchend',fnEnd,false);
    //阻止默認事件
    ev.preventDefault();
   },false);

  }
 </script>
</head>
<body>
 <div id="box"> 
 <ul>
  <li style="background:green">3</li>
  <li style="background:orange">1</li>
  <li style="background:yellow">2</li>
  <li style="background:green">3</li>
  <li style="background:orange">1</li>
 </ul>
 </div> 
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: