這篇文章主要介紹了JavaScript怎么實現(xiàn)移動端輪播效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司是專業(yè)的太和網(wǎng)站建設公司，太和接單;提供成都網(wǎng)站設計、成都網(wǎng)站制作,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行太和網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

Java的優(yōu)點是什么

1. 簡單，只需理解基本的概念，就可以編寫適合于各種情況的應用程序；2. 面向?qū)ο螅?. 分布性，Java是面向網(wǎng)絡的語言；4. 魯棒性，java提供自動垃圾收集來進行內(nèi)存管理，防止程序員在管理內(nèi)存時容易產(chǎn)生的錯誤。；5. 安全性，用于網(wǎng)絡、分布環(huán)境下的Java必須防止病毒的入侵。6. 體系結(jié)構(gòu)中立，只要安裝了Java運行時系統(tǒng)，就可在任意處理器上運行。7. 可移植性，Java可以方便地移植到網(wǎng)絡上的不同機器。8.解釋執(zhí)行，Java解釋器直接對Java字節(jié)碼進行解釋執(zhí)行。

這個輪播代碼不是我自己所寫，是偶然游覽一個簡友的主頁看到的，今天剛看了事件，決定來逐行分析一下這個代碼。首先，移動端與電腦端不同的是移動端只能通過觸摸和手勢來發(fā)生行為，所以我們要用到js中的與觸摸操作有關的新事件。其實我們輪播的原理和以前相同，都是通過改變元素的位置來控制圖片的出現(xià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é)點目標

代碼如下

 
 
  * {
   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;
  }
 
 
  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);

  }
 


  
 

  3
  1
  2
  3
  1