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 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
js实现无缝滚动图
Feb 22 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
详解Vue中的基本语法和常用指令
Jul 23 Javascript
JS出现404错误原理及解决方案
Jul 01 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,js双版本
2012/09/25 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
简单介绍Python中的struct模块
2015/04/28 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python设置值及NaN值处理方法
2018/07/03 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
门卫工作岗位职责
2013/12/17 职场文书
售后服务承诺书范文
2014/03/26 职场文书
我的长生果教学反思
2014/04/28 职场文书
学校节能减排方案
2014/06/13 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
计划生育责任书
2015/05/09 职场文书
商务宴会祝酒词
2015/08/11 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书