利用纯js + transition动画实现移动端web轮播图详解

前言

在上一篇文章中,我们使用 tween算法实现了 ease-out移动效果, 其实更简洁的方法是使用 css3的 transition动画，下面话不多说了，来一起看看详细的介绍吧。

核心点:

在 我们通过代码来移动一段距离的时候, 使用 transion动画;在手指移动的时候,不使用transition动画.

使用 transition实现的动画效果的轮播图js代码不足100行

~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; // 图片个数
  var t1 = 0; // 记录开始触摸的时刻
  var t2 = 0; // 记录结束触摸的时刻
  var width = window.innerWidth; // 当前窗口宽度
  var nodeList = document.querySelectorAll('#imgWrap img'); // 所有轮播图节点数组 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 回调函数中系统传回的 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); 

 }(); 

注意事项:

当切换到边界值的图时,应该等到切换动画效果之后再换到相同图内容的位置

所以:   我们使用setTimeout延迟执行 无限循环播放替换图位置的操作

至于 css 和 html嘛, 还是原来的配方, 还是原来的味道~参见这篇文章：http://www.jb51.net/article/123303.htm

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。