JS组件库AlloyTouch实现图片轮播过程解析


Posted in Javascript onMay 29, 2020

轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹。

除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动。所以AlloyTouch制作各种各样的轮播组件还是得心应手。

JS组件库AlloyTouch实现图片轮播过程解析

第一种轮播图如上图所示。下面开始实现的过程。

第0秒

<div id="carousel-container">
 <div class="carousel">
  <div class="carousel-scroller" id="carousel-scroller">
   <img style="width: 88%;" src="asset/ci1.jpg">
   <img style="width: 88%;" src="asset/ci2.jpg">
   <img style="width: 88%;" src="asset/ci3.jpg">
   <img style="width: 88%;" src="asset/ci4.jpg">
   <img style="width: 88%;" src="asset/ci5.jpg">
  </div>

 </div>
</div>

一共五张图,每张图占有屏幕比例的百分之88,所以用户的屏幕里可以看到一张多一点的图片,给用户可以横向滑动查看的感觉。

第10秒

<script src="../transformjs/transform.js"></script>
<script src="../alloy_touch.js"></script>
<script>
 var scroller = document.querySelector("#carousel-scroller");
 Transform(scroller); 
</script>

通过Transform(scroller); 注入CSS3 transform属性。

第20秒

new AlloyTouch({
 touch: "#carousel-container",//反馈触摸的dom
 vertical: false,// 监听用户横向触摸
 target: scroller, //运动的对象
 property: "translateX", //被运动的属性
 min:0.88 * window.innerWidth * -5 + window.innerWidth, 
 max: 0
})

这里最大的难点(其实也没有什么难的),就是就是min的值。因为初始值是0,所有向左边滑动一定是负值。可以得到max一定是0。

那么min的值就是: 屏幕的宽度-图片的张数*图片的宽度

  • 图片的宽度为0.88 * window.innerWidth
  • 屏幕的宽度为window.innerWidth
  • 图片的张数为 5

JS组件库AlloyTouch实现图片轮播过程解析

第30秒

如上图所示,相对于传统的swipe然后再去触发滚动,上面的跟手然后再去校正的体验是更加良好的。那么怎么实现呢?
首先,AlloyTouch是支持step配置。

new AlloyTouch({
step: 100,
...
...
...
})

只要用户设置的step,最后运动结束之后,AlloyTouch都会帮用户校正到最接近的step的整数倍的位置。

比如上面是100:

  • 如果运动的对象停在 120,会被校正到100
  • 如果运动的对象停在 151,会被校正到200
  • 如果运动的对象停在 281,会被校正到300
  • 如果运动的对象停在 21,会被校正到0

第40秒

当然这有个问题,比如用户从0滑倒30,其实他是想去100,但是会被校正到0!!!

所以光使用校正是不够。还需要一个API去阻止校正自己去注入逻辑滚动相应的位置。所以你必须支持AlloyTouch的:

to 方法

to(v [, time, easing])

其中time和easing不是必须。time的默认值是600.

第50秒

var items = document.querySelectorAll("#nav a");
var scroller = document.querySelector("#carousel-scroller");
Transform(scroller);
new AlloyTouch({
 touch: "#carousel-container",//反馈触摸的dom
 vertical: false,//不必需,默认是true代表监听竖直方向touch
 target: scroller, //运动的对象
 property: "translateX", //被运动的属性
 min: window.innerWidth * -3, //不必需,运动属性的最小值
 max: 0, //不必需,滚动属性的最大值
 step: window.innerWidth,
 inertia: false, //不必需,是否有惯性。默认是true
 touchEnd: function (evt, v, index) {

  var step_v = index * this.step * -1;
  var dx = v - step_v;

  if (v < this.min) {
   this.to(this.min);
  } else if (v > this.max) {
   this.to(this.max);
  } else if (Math.abs(dx) < 30) {
   this.to(step_v);
  }
  else if (dx > 0) {
   this.to(step_v + this.step);
  } else {
   this.to(step_v - this.step);
  }

  return false;
 },
 animationEnd: function (evt , v) {
  var i = 0,
   len = items.length;
  for (; i < len; i++) {
   if (i === this.currentPage) {
    items[i].classList.add("active");
   } else {
    items[i].classList.remove("active");
   }
  }

 }
})

因为一共四张图,所以
min得到的结果是 window.innerWidth * -3
max的值依然是0
step的值是 window.innerWidth
通过设置 inertia: false,把惯性运动关掉
注意看touchEnd里面的return false是为了不去计算手指离开屏幕后的校正位置、惯性运动等逻辑。
touchEnd可以拿到当前的位置v以及当前所处的位置index。
animationEnd是运动结束后的回调,用来设置nav的active。当然不是所有浏览器都支持classList,这里只是为了演示代码足够简洁。
再注意,在touchEnd和animationEnd中能拿到this,也就是AlloyTouch当前对象的实例。其中,
to方法用来运动当前对象
step是当前的步长
还可以拿到currentPage去获取当前所处的页码
还能拿到min和max值,得到运动的区间。

最后

所有例子演示和代码可以在Github上找到。

Github:https://github.com/AlloyTeam/AlloyTouch

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
详解小程序循环require之坑
Mar 08 Javascript
基于vue实现探探滑动组件功能
May 29 #Javascript
JS实现前端路由功能示例【原生路由】
May 29 #Javascript
JavaScript如何实现图片处理与合成
May 29 #Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
JavaScript基于用户照片姓名生成海报
May 29 #Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 #Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 #Javascript
You might like
php文件上传表单摘自drupal的代码
2011/02/15 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
一套SQL笔试题
2016/08/14 面试题
青春飞扬演讲稿
2014/09/11 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
辞职信格式范文
2015/05/13 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript
Python pyecharts绘制条形图详解
2022/04/02 Python