欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-28 23:48:01
前言 在中,我们使用 tween算法实现了 ease-out移动效果, 其实更简洁的方法是使用 css3的 transition动画,下面话不多说了,来一起看看详细的介绍...

前言

在中,我们使用 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嘛, 还是原来的配方, 还是原来的味道~参见这篇文章:

总结

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