原生JS实现移动端web轮播图详解(结合Tween算法造轮子)


Posted in Javascript onSeptember 10, 2017

前言

相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是 使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改.      

所以我们要尝试去自己造一些轮子, 以适应各种复杂多变的需求;  另外一点, 自己写的代码如果有bug是很容易修复的, 对自身的提高也很大.

在没有阅读swiper源码的过程下,我尝试自己实现一个简易而不失实用的移动端轮播图, 经过几个小时的思考和实践终于还是实现了(如图):

原生JS实现移动端web轮播图详解(结合Tween算法造轮子)

实现移动端的轮播图要比pc复杂一些,主要表现在以下几个方面:

     1.轮播图要适应不同宽度/dpr的屏幕 

     2.需要使用 touch相关的事件 

     3.不同机型对 touch事件支持的不太一样,可能会有一些兼容性问题 

     4.手指移动图片一部分距离,剩下的距离需要自动完成 

     5.自动完成距离需要有 ease 时间曲线 

但编程解决问题的思路都是差不多的,

我们在使用轮播图的时候可以仔细观察,通过现象看到本质:

  • 我们在使用轮播图的时候可以仔细观察,通过现象看到本质: 
  • 手指放在图片上, 手指向左或者向右移动, 图片也随之移动; 
  • 手指移动的距离少时,图片自动复原位置;手指移动的距离多时,自动切换到下一张; 
  • 手指向左或者向右移动的快时,会切换到下一张; 
  • 图片轮播是无限循环的, 我们需要采用  3 1 2 3 1的方式来实现, 即 N+2张图来实现N张图的无限循环轮播 

我们通过分析现象,可以提出一个基本实现方案:

     1. 手指触摸事件可以通过 touchstart touchmove touchend 3个事件来实现 

     2.在手指 touchstart的时候我们需要记录 手指的x坐标,  可以使用 touch的pageX属性; 还有 这个时间点, 

     3.手指touchmove的时候我们也需要记录pageX,并且记录累计移动的距离 moveX 

     4.手指离开的时候,记录时间点, 根据前两步计算的 x方向移动的距离,时间点之差 

     5.通过比较x方向移动距离来判断移动方向, 以及是否应该切换到下一张图; 根据时间判断用户是否进行了左右扫动的操作 

     6.移动图片可以使用 translate3d来实现,开启硬件加速 

     7.移动一段距离需要 easeOut效果,我们可以使用 Tween算法中的easeOut来实现我们每次移动的距离; 当然也可以使用 js设置 transition动画 

实现源码(仅供参考):

head头部样式

<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=.5,maximum-scale=.5"> 
 <title>移动端轮播图</title> 
 <style> 
 * { 
 box-sizing: border-box; 
 margin: 0; 
 padding: 0 
 } 
 .banner { 
 overflow: hidden; 
 width: 100%; 
 height: 300px 
 } 
 .banner .img-wrap { 
 position: relative; 
 height: 100% 
 } 
 .banner img { 
 display: block; 
 position: absolute; 
 top: 0; 
 width: 100%; 
 height: 100% 
 } 
 </style> 
</head>

HTML结构

<div class="banner"> 
 <div class="img-wrap" id="imgWrap"> 
 <img src="images/banner_3.jpg" data-index="-1"> 
 <img src="images/banner_1.jpg" data-index="0"> 
 <img src="images/banner_2.jpg" data-index="1"> 
 <img src="images/banner_3.jpg" data-index="2"> 
 <img src="images/banner_1.jpg" data-index="3"> 
 </div> 
</div>

JS代码1, easeOut动画式移动,

这里的   HTMLElement.prototype.tweenTranslateXAnimate ,是给所有的HTML元素类扩展的tweenTranslateXAnimate方法

移动一段距离我们需要使用定时器来帮助我们完成,这个重复的操作

<script> 
 HTMLElement.prototype.tweenTranslateXAnimate = function (start, end, callback) { 
 var duration = 50; 
 var t = 0; 
 var vv = end - start; 
 var Tween = { 
 Quad: { 
 easeOut: function (t, b, c, d) { 
  return -c * (t /= d) * (t - 2) + b; 
 } 
 } 
 }; 
 
 this.timer = setInterval(function () { 
 var dis = start + Tween.Quad.easeOut(++t, 0, vv, duration); 
 this.style.transform = 'translate3d(' + dis + 'px, 0, 0)'; 
 if (vv > 0 && parseInt(this.style.transform.slice(12)) >= end) { 
 this.style.transform = 'translate3d(' + parseInt(dis) + 'px, 0, 0)'; 
 clearInterval(this.timer); 
 callback && callback(); 
 } 
 if (vv < 0 && parseInt(this.style.transform.slice(12)) <= end) { 
 this.style.transform = 'translate3d(' + parseInt(dis) + 'px, 0, 0)'; 
 clearInterval(this.timer); 
 callback && callback(); 
 } 
 }.bind(this), 4); 
 } 
</script>

touch事件部分

<script> 
 ~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); 
 var start = parseInt(imgWrap.style.transform.slice(12)); 
 // 动画移动 
 imgWrap.tweenTranslateXAnimate(start, dis, function () { 
 setTimeout(function () { 
  movex = dis; 
  if (tIndex === imgSize) { 
  imgWrap.style.transform = 'translate3d(0, 0, 0)'; 
  movex = 0; 
  } 
  if (tIndex === -1) { 
  imgWrap.style.transform = 'translate3d(' + width * (1 - imgSize) + 'px, 0, 0)'; 
  movex = -width * (imgSize - 1); 
  } 
 }, 0); 
 }); 
 } 
 
 /** 
 * 处理各种触摸事件 ,包括 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)'; 
 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); 
 
 }(); 
 
</script>

在触摸事件中最关键的参数是  pageX参数, 记录x的位置.

当然这只是一个demo,还需要进一步的优化和封装, 以便于我们用在真实的项目.

本demo仅仅是提供了一个解决问题的思路, 有了这个思路,相信各种复杂的需求也得以解决...

本文中使用的 tween算法来实现 ease-out效果 ,也可以使用 transtion动画实现, 代码更加简洁,参见轮播图优化篇: https://3water.com/article/123304.htm

总结

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

Javascript 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
JavaScript严格模式详解
Nov 18 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
详解json串反转义(消除反斜杠)
Aug 12 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 #Javascript
You might like
东方红 - 来复式再生机的修复
2021/03/02 无线电
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
js href的用法
2010/05/13 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
Python入门篇之数字
2014/10/20 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python使用knn实现特征向量分类
2018/12/26 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
一份软件工程师的面试试题
2016/02/01 面试题
2014年妇幼保健工作总结
2014/12/08 职场文书
员工家属慰问信
2015/03/24 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python