JavaScript实战项目:移动端 Touch 轮播图

原创 前端-DK 随笔 前端 61阅读 9 天前 举报

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. 添加定时器,让图片动起来

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

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

6. touch 滑动

移动端的轮播图,配合touch滑动事件,效果更加友好。

分别绑定三个touch事件

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

7. 完整代码

一定要注意,碰到在js里面动态设定高度的时候,如果页面一加载就需要设置,那么就要用window.onload事件。

示例代码:

自己是从事了五年的前端工程师,不少人私下问我,2019年前端该怎么学,方法有没有?

没错,年初我花了一个多月的时间整理出来的学习资料,希望能帮助那些想学习前端,却又不知道怎么开始学习的朋友。

这里推荐一下我的前端学习交流群:784783012 ,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2019最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

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

赶紧努力消灭 0 回复