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


Posted in Javascript onSeptember 10, 2017

前言

在上一篇文章中,我们使用 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嘛, 还是原来的配方, 还是原来的味道~参见这篇文章:https://3water.com/article/123303.htm

总结

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

Javascript 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
webpack 开发和生产并行设置的方法
Nov 08 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 #Javascript
vue系列之动态路由详解【原创】
Sep 10 #Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 #Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 #Javascript
js 发布订阅模式的实例讲解
Sep 10 #Javascript
node.js 发布订阅模式的实例
Sep 10 #Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 #Javascript
You might like
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
python递归计算N!的方法
2015/05/05 Python
Python松散正则表达式用法分析
2016/04/29 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python底层封装实现方法详解
2020/01/22 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
法学函授自我鉴定
2014/02/06 职场文书
股东授权委托书范本
2014/09/13 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书