~function () {   var lastPX = 0; // 上一次觸摸的位置x坐標, 需要計算出手指每次移動的一點點距離   var movex = 0; // 記錄手指move的x方向值   var imgWrap = document.getElementById('imgWrap');   var startX = 0; // 開始觸摸時手指所在x坐標   var endX = 0; // 觸摸結束時手指所在的x坐標位置   var imgSize = imgWrap.children.length - 2; // 圖片個數(shù)   var t1 = 0; // 記錄開始觸摸的時刻   var t2 = 0; // 記錄結束觸摸的時刻   var width = window.innerWidth; // 當前窗口寬度   var nodeList = document.querySelectorAll('#imgWrap img'); // 所有輪播圖節(jié)點數(shù)組 NodeList    // 給圖片設置合適的left值, 注意 querySelectorAll返回 NodeList, 具有 forEach方法   nodeList.forEach(function (node, index) {    node.style.left = (index - 1) * width + 'px';   });    /**    * 移動圖片到當前的 tIndex索引所在位置    * @param {number} tIndex 要顯示的圖片的索引    * */   function toIndex(tIndex) {    var dis = -(tIndex * width);    // 動畫移動    imgWrap.style.transform = 'translate3d(' + dis + 'px, 0, 0)';    imgWrap.style.transition = 'transform .2s ease-out';    movex = dis;    // 索引到最后一張圖片, 迅速切換索引到同一張圖的初始位置    setTimeout(function () {     if (tIndex === imgSize) {      imgWrap.style.transform = 'translate3d(0, 0, 0)';      imgWrap.style.transition = 'none';      movex = 0;     }     if (tIndex === -1) {      imgWrap.style.transform = 'translate3d(' + width * (1 - imgSize) + 'px, 0, 0)';      imgWrap.style.transition = 'none';      movex = -width * (imgSize - 1);     }    }, 200);    }    /**    * 處理各種觸摸事件 ,包括 touchstart, touchend, touchmove, touchcancel    * @param {Event} evt 回調函數(shù)中系統(tǒng)傳回的 js 事件對象    * */   function touch(evt) {    var touch = evt.targetTouches[0];    var tar = evt.target;    var index = parseInt(tar.getAttribute('data-index'));    if (evt.type === 'touchmove') {     var di = parseInt(touch.pageX - lastPX);     endX = touch.pageX;     movex += di;     imgWrap.style.webkitTransform = 'translate3d(' + movex + 'px, 0, 0)';     imgWrap.style.transition = 'none'; // 移動時避免動畫延遲     lastPX = touch.pageX;    }    if (evt.type === 'touchend') {     var minus = endX - startX;     t2 = new Date().getTime() - t1;     if (Math.abs(minus) > 0) { // 有拖動操作      if (Math.abs(minus) < width * 0.4 && t2 > 500) { // 拖動距離不夠,返回!       toIndex(index);      } else { // 超過一半,看方向       console.log(minus);       if (Math.abs(minus) < 20) {        console.log('距離很短' + minus);        toIndex(index);        return;       }       if (minus < 0) { // endX < startX,向左滑動,是下一張        toIndex(index + 1)       } else { // endX > startX ,向右滑動, 是上一張        toIndex(index - 1)       }      }     } else { //沒有拖動操作      }    }    if (evt.type === 'touchstart') {     lastPX = touch.pageX;     startX = lastPX;     endX = startX;     t1 = new Date().getTime();    }    return false;   }    imgWrap.addEventListener('touchstart', touch, false);   imgWrap.addEventListener('touchmove', touch, false);   imgWrap.addEventListener('touchend', touch, false);   imgWrap.addEventListener('touchcancel', touch, false);   }();