原生 js 实现移动端 Touch 轮播图

秒速五厘米 2022-03-30 20:39 286阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

## Touch 轮播图 ##

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

### 1. html 结构 ###

> 结构上，还是用 `ul`、 `li`来存放轮播图片， `ol`、 `li`来存放轮播小圆点：

![image][]

### 2. 样式初始化 ###

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

/* 清除标签默认边距 */
    body,ul,li,ol,img {
        margin: 0;
        padding: 0;
    }
    
    /* 清除 ul 等标签前面的“小圆点” */
    ul,li,ol {
        list-style-type: none;
    }
    
    /* 图片自适应 */
    img {
        width: 100%;
        height: auto;
        border: none;
        /* ie8 */
        display: block;
        -ms-interpolation-mode: bicubic; /*为了照顾ie图片缩放失真*/
    }

![image][image 1]

### 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`设置一个宽高添加圆角边框属性，并且左浮动，这样就能显示一排空心的小圆点了；
 *  最后，添加一个样式类，里面设置一个背景属性，用来显示当前展示图片对应的小圆点。

/* 轮播图最外层盒子 */
    .carousel {
        position: relative;
        overflow: hidden;
    }
    
    .carousel ul {
        /* 这个高度需要在JS里面动态添加 */
    }
    
    .carousel ul li {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        /* 使用 transform:translaX(300%) 暂时将 li 移动到屏幕外面去*/
        -webkit-transform: translateX(300%);
        transform: translateX(300%);
    }
    
    /* 小圆点盒子 */
    .carousel .points {
        /* 未知宽度的盒子，使用 absolute 定位，结合 transform 的方式进行居中 */
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
    }
    
    /* 小圆点 */
    .carousel .points li {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        border: 1px solid #fff;
        float: left;
        margin: 0 2px;
    }
    
    /* 选中小圆点的样式类 */
    .carousel .points li.active {
        background-color: #fff;
    }

![image][image 2]

### 4. js 准备工作 ###

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

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

![image][image 3]

**效果图：**

![image][image 4]

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

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

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

![image][image 5]

**效果图：**

![image][image 6]

### 6. touch 滑动 ###

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

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

![image][image 7]

**效果图：**

![image][image 8]

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、[金山软件][Link 1]、[百姓网][Link 2]等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[image]: /images/20220331/c2c32afb44c348f0953c297f74cf3949.png
[image 1]: /images/20220331/394f197a7a0f483b84426db9c271b910.png
[image 2]: /images/20220331/57a6c895c3a445b8b0654294e9371bec.png
[image 3]: /images/20220331/bbe1a3fcd6ea4963857f23aa583df8b6.png
[image 4]: /images/20220331/d53927fb14eb462ab95e7bc54f21459b.png
[image 5]: /images/20220331/a4737e2e290945bf845de89c3d2f6606.png
[image 6]: /images/20220331/66f42d6d63b04bdd85feb0b7d0d22cba.png
[image 7]: /images/20220331/756e0985473c4238903d5ef44233dfbf.png
[image 8]: /images/20220331/be4c3b37e71e4238a228d25429e2cf39.png
[Link 1]: https://www.baidu.com/s?wd=%E9%87%91%E5%B1%B1%E8%BD%AF%E4%BB%B6&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[Link 2]: https://www.baidu.com/s?wd=%E7%99%BE%E5%A7%93%E7%BD%91&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[2018121912254161]: /images/20220331/09550eae180042a1a65e6ba46288dec7.png