利用纯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 GUID生成器实现代码
Oct 31 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
javascript实现智能手环时间显示
Sep 18 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/03/18 PHP
php实现点击可刷新验证码
2015/11/07 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
TypeScript入门-接口
2017/03/30 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
Python 初始化多维数组代码
2008/09/06 Python
Python实现多线程下载文件的代码实例
2014/06/01 Python
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
对python中的argv和argc使用详解
2018/12/15 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Django 开发环境配置过程详解
2019/07/18 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
公安机关起诉意见书
2015/05/20 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
小学数学教师研修日志
2015/11/13 职场文书