1、轮播思路

简单的轮播思路便是如图所示

2、html

简单的搭建一下dom

 <div class="banner">
      <div class="imgList">
        <img src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
        <img src="./img/4.jpg" alt="">
        <img src="./img/5.png" alt="">
      </div>

      <div class="control">
        <div class="controlItem left">&lt;</div>
        <div class="controlItem right">&gt;</div>
      </div>
    </div>

3、CSS

简单实现一下样式

3.1 imgList

banner盒子需要一个定宽
给img设置100%宽度（img是行内替换级元素，所以可以设置宽度，百分比相对父类）
把imgList变成弹性盒子（img行内替换级元素，在imgList里会在同一行排列好）

效果如下

    .banner {
      width: 586px;
      /* overflow: hidden; */
    }

    .imgList {
      display: flex;
    }

   .imgList img {
      width: 100%;
    }

溢出部分让父元素进行overflow：hidden 便可隐藏了

3.2 control

control宽高百分比继承banner
让control绝对定位到banner上，top：0盖住banner
control变成弹性盒子方便对控制按钮布局
control弹性盒子内：主轴两端对齐，交叉轴居中

    .banner {
      position: relative;
      width: 586px;
      overflow: hidden;
    }
    .control {
      position: absolute;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      width: 100%;
    }

    //控制按钮的样式
    .control .controlItem {
      font-size: 44px;
      cursor: pointer;
    }

4、JS

搭了这么久的布局，终于来到js了 ==

声明两个常量记录banner宽度跟图片数量（用于计算imgList的位移）
获取imgList的元素和control的元素

    const BANNER_WIDTH = document.querySelector('.banner').clientWidth
    const imgList = document.querySelector('.imgList')
    const IMG_NUM = imgList.children.length
    const control = document.querySelectorAll('.controlItem')

函数

首先我们需要定义一个x用来记录imgList的位移，通常x 的值为banner宽度的倍数(BANNER_WIDTH)，且x为负数，初始值0

    // 记录imgList 位移
    let x = 0

然后就是超级简单的算术了

当我们点击下一张时，x在原来的基础上减去一个BANNER_WIDTH
当我们点击上一张时，x在原来的基础上加上一个BANNER_WIDTH
当我们在最后一张点下一张时，x变成0
当我们在第一张点上一张时，x变为(BANNER_WIDTH*(IMG_NUM-1))

const controlClick = (direction = 'right') => {
//因为我们是用addEventListener监听点击的，函数携带参数，所以直接返回一个函数，在调用时传入参数（方向）
      return () => {
        direction == 'right' ? x -= BANNER_WIDTH : x += BANNER_WIDTH
        x >= 0 ? x = -(BANNER_WIDTH * (IMG_NUM - 1)) : x
        x < -(BANNER_WIDTH * (IMG_NUM - 1)) ? x = 0 : x
        imgList.style.transform = `translateX(${x}px)`
      }
    }

最后一步监听

    // 左右点击
    control[0].addEventListener('click', controlClick('left'))
    control[1].addEventListener('click', controlClick())

总结

写文章真的太难了，写了半天才写完== ，当作锻炼自己的表达能力^_^

感觉写的对新手挺友好的把，欢迎大佬指点最后附上完整源码

身为前端复制粘贴工程师你写过轮播图吗？超级简易轮播图