告别组件之教你使用原生js和css写移动端轮播图

在工作中由于项目需要要写一个轮播图，本想使用组件直接调用实现快速开发，但是一想到自己经常使用组件但是让自己手写的话确实一点都不会。

一个不会手写组件的前端程序员不是一个好程序员！于是打算自己手写一个。

老规矩，首先看一下最终效果，这个最终可以实现定时自动播放，触摸滑动，手动修改下面横条效果等功能。

项目中使用到的HTML代码如下

<div class="banner">
    <ul class="clearfix">
        <li><a href="#"><img
                    src="./assets/images/loginPage/banner2.png"></a></li>
        <li><a href="#"><img
                    src="./assets/images/loginPage/banner1.png"></a></li>
        <li><a href="#"><img
                    src="./assets/images/loginPage/banner2.png"></a></li>
        <li><a href="#"><img
                    src="./assets/images/loginPage/banner1.png"></a></li>
    </ul>
    <ul>
        <li class="now"></li>
        <li></li>
    </ul>
</div>

原理简介

在这里我们以两张轮播图为例，由图上可以注意到，我们一共放了四张轮播图，为什么呢？因为我们在向右滑动的过程中为了保证某张轮播图的右边始终有一个轮播图可以看到，于是我们把轮播图的最后一张放在最前面，轮播图的第一张放在最后面。当轮播图滑到最后面的时候，此时消除动画效果，把轮播图的transformX调到第二张轮播图的所在位置，如上图所示。

自动播放

首先我们来实现以下自动播放，项目中我没有使用jQuery，而是直接使用的原生js，我们先来获取一下dom元素。

要注意：在移动端并没有使用px作为定位距离单位，而是使用的相对距离，在这里我是基于750px的设计稿进行计算，按照我的计算规则：

1rem = 100px

也就是说，设计稿上的100px相当于我的html界面的1rem，具体的rem应用方法请移步我的