利用纯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 面向对象编程基础 多态
Aug 21 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
微信小程序反编译的实现
Dec 10 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
原生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写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php实现socket推送技术的示例
2017/12/20 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python中with及contextlib的用法详解
2017/06/08 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
2019初中学生入团申请书
2019/06/27 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
总结Python常用的魔法方法
2021/05/25 Python
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
Golang入门之计时器
2022/05/04 Golang