利用纯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嘛, 还是原来的配方, 还是原来的味道~参见这篇文章：

总结

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