原生js实现移动端Touch轮播图的方法步骤

原创 Fly丶 教程 js 156阅读 30 天前 举报

Touch 轮播图

touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下。

1. html 结构

结构上,还是用ul、li来存放轮播图片,ol、li来存放轮播小圆点:

2. 样式初始化

html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉。

3. 添加样式

在前面讲特效的时候,我们说过如何使用原生js实现移一个轮播图的概念,但是当时的方式是通过li浮动,这里给大家介绍一种新的方——定位。
思路:

  • 给ul外层的盒子一个相对定位;
  • 这里的ul高度不能写死,它应该是li撑开的高度,但是由于li绝对定位,没办法撑开这个高度,所以这里的ul需要在js里面动态设置高度;
  • 给li设置相对定位,并且left、top都为0,再给li添加一个transform:translateX(300%)属性,目的是初始化显示的图片为空,然后在js里只需要动态设置每个li的translateX值,即可实现轮播;
  • 设置小圆点区域,因为小圆点个数未知,所以ol的宽度也未知,想要让一个未知宽度的盒子水平居中,可以使用absolute定位结合left百分比的方式实现;
  • 给ol下面的li设置一个宽高添加圆角边框属性,并且左浮动,这样就能显示一排空心的小圆点了;
    最后,添加一个样式类,里面设置一个背景属性,用来显示当前展示图片对应的小圆点。

4. js 准备工作

先不考虑别的,js在初始化的时候,首先要做的就是给ul添加上一个高度,不然图片是不显示的。

  • 给UL动态设置高度
  • 动态生成小圆点 (根据图片的张数创建小圆点个数,i=0 添加active)
  • 初始化三个li的基本位置
  • 定义三个变量,分别用来存储三个li的下(left存储最后一张图片的下标,center和right分别存储第一张和第二张的下标)
  • 通过数组[下标]的方式给三个li设置定位后left方向的位置

效果图:

5. 添加定时器,让图片动起来

轮播图都会自己轮播,所以需要用到定时器,每隔一段时间执行一次轮转函数。

  • 添加定时器,定时器里面轮转下标
  • 极值判断
  • 设置过渡(替补的那张不需要过渡)
  • 归位
  • 小圆点焦点联动

效果图:

  1. touch 滑动
    移动端的轮播图,配合touch滑动事件,效果更加友好。
  • 分别绑定三个touch事件
    • touchstart里面记录手指的位置,清除定时器,记录时间
    • touchmove里面获取差值,同时清除过渡,累加上差值的值
    • touchend里面判断是否滑动成功,滑动的依据是滑动的距离(绝对值)
  • 超过屏幕的三分之一或者滑动的时间小于300毫秒同时距离大于30(防止点击就跑)的时候都认为是滑动成功
  • 在滑动成功的条件分支里面在判断滑动的方向,根据方向选择调用上一张还是下一张的逻辑
  • 在滑动失败的条件分支里面添加上过渡,重新进行归位
  • 重启定时器

效果图:

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复