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 相关文章推荐
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
js Proxy的原理详解
May 25 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 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
php创建图像具体步骤
2017/03/13 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
大学新生欢迎词
2014/01/10 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
个人自荐材料
2014/05/23 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
美术专业自荐信
2014/07/07 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python