轮播图要实现的功能

点击小圆点，切换图片到对应的位置

点击左箭头，如果第一张切换到最后一张

点击右箭头，如果最后一张切换到第一张

自动播放，并且拥有匀速动画；

鼠标移入轮播区域自动播放停止，移出离开

创建动画函数

    // 创建一个动画函数，obj为动画的主体，target为目标值，speed为速度，callback为回调函数，可以不加
        function move(obj, target, speed, callback) {
          // 先默认清除定时器
          clearInterval(obj.timer);
          // 判断目标值与当前元素位置，因为是元素位置到目标值，如果目标值小于元素位置，则元素位置需要一直减，减到元素位置与目标值相等
          if (target < obj.offsetLeft) {
            // 将速度改为负值
            speed = -speed;
          }

          // 创建一个定时器并赋值给元素添加一个键名timer；
          obj.timer = setInterval(function () {
            // 创建一个旧值，为当前元素现在的位置
            let oldValue = obj.offsetLeft;
            // 创建一个新值，为当前元素的位置加上此时的速度
            let newValue = oldValue + speed;
            // 判断此时的速度为正为负，并且判断新值是否超出了目标值，超出就将目标值给新值，如果if语句成立也基本意味着定时器结束了；
            if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
              newValue = target;
            }

            // 将新值加上px给left
            obj.style.left = newValue + "px";
            // 新值与目标值相等，就停止定时器，并添加一个回调函数，定时器停止，回调函数执行
            if (target === newValue) {
              clearInterval(obj.timer);
              callback && callback();
            }
          }, 10)
        }

点击小圆点，切换图片到对应位置

    for (let i = 0; i < btns.length; i++) {
          btns[i].onclick = function () {
            // 触发下面点击事件函数
            btnClick(i);
            // 触发动画函数
            move(boxCon, index * -boxW - boxW, 10)
          };
        }
    function btnClick(k) {
          // 先将形参传给index
          index = k;
          // 先遍历将每一个小圆点的背景色取消
          for (let i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = "";
          }
          // 判断index是否大于等于5，成立触发if语句,触发的事件有两个，一个是自动播放到最后一张的时候触发，另一个是右箭头触发事件会触发
          if (index >= btns.length) {
            index = 0;
            boxCon.style.left = -boxW + "px"
            // 判断index是否小于0，成立就触发else if语句，这里是给左箭头点击事件时候会触发
          } else if (index < 0) {
            index = 4;
            boxCon.style.left = -boxW * btns.length + "px"
          }
          // 将btns数组里index的背景颜色改为红色；
          btns[index].style.backgroundColor = "red";
        };

自动轮播

// 自动播放函数执行
        autoChange();
        // 创建一个自动播放函数
        function autoChange() {
          // 默认先清除一遍定时器
          clearInterval(timer)
          // 将定时器赋值给timer
          timer = setInterval(function () {
            // 因为自动播放要动起来，需要不停改变index值，通过改变index值，改变boxCon.style.left值
            index++
            // 执行move函数
            move(boxCon, index * -boxW - boxW, 10, function () {
              // move执行函数结束后执行回调函数
              btnClick(index)
            })
          }, 2000)
        }

对箭头添加事件

    // 对箭头添加事件
        arrowL.onclick = function () {
          index--
          move(boxCon, index * -boxW - boxW, 50, function () {
            btnClick(index)
          })
        }
        // 对箭头添加事件
        arrowR.onclick = function () {
          index++
          move(boxCon, index * -boxW - boxW, 50, function () {
            btnClick(index)
          })
        }

对容器添加移入移出事件

    // 对整体容器添加移入事件
        wraAll.onmouseenter = function () {
          clearInterval(timer)
          arrowL.style.display = "block";
          arrowR.style.display = "block";
        }
        // 对整体容器添加移出事件
        wraAll.onmouseleave = function () {
          autoChange();
          arrowL.style.display = "none";
          arrowR.style.display = "none";
        }