利用纯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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
JavaScript实现显示和隐藏图片
Apr 29 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 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python open()文件处理使用介绍
2014/11/30 Python
Django中几种重定向方法
2015/04/28 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
python属于解释语言吗
2020/06/11 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
会计顶岗实习心得
2014/01/25 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
研究生简历自我评
2015/03/11 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server