<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <title>Document</title>
  <style>
    li {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 400px;
      height: 300px;
      overflow: hidden;
      margin: 100px auto;
      position: relative;
    }

    ul {
      width: 400%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    ul li {
      float: left;
    }

    img {
      width: 400px;
      height: 300px;
    }

    ol {
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
    }

    ol li {
      float: left;
      width: 10px;
      height: 10px;
      border: 2px solid orange;
      border-radius: 50%;
      margin: 0 5px;
      cursor: pointer;
    }

    .arrow {
      position: absolute;
      width: 20px;
      height: 20px;
      top: 50%;
      transform: translateY(-50%);
      border-top: 5px solid #aaa;
      cursor: pointer;
      display: none;
    }

    .arrow_left {
      left: 5px;
      border-left: 5px solid #aaa;
      transform: rotate(-45deg);
    }

    .arrow_right {
      right: 5px;
      border-right: 5px solid #aaa;
      transform: rotate(45deg);
    }

    .current {
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul>
      <li><img src="./imgs/1.png" alt=""></li>
      <li><img src="./imgs/2.jpg" alt=""></li>
      <li><img src="./imgs/3.png" alt=""></li>
    </ul>
    <ol></ol>
    <div class="arrow arrow_left"></div>
    <div class="arrow arrow_right"></div>
  </div>


  <script>
    $(function () {

      // 显示影藏箭头
      var box = $('.box')
      box.on({
        mouseover: function () {
          $('.arrow').css('display', 'block')
          clearInterval(timeId)
          timeId = null
        },
        mouseout: function () {
          $('.arrow').css('display', '')
          timeId = setInterval(() => {
            arrowRight.trigger('click')
          }, 3000);
        }
      })

      // 创建小圆点
      var ul = box.children('ul')
      var ol = box.children('ol')
      for (var i = 0; i < ul.children().length; i++) {
        var li = $('<li></li>')
        li.attr('index', i)
        ol.append(li)
      }
      ol.children().eq(0).addClass('current')

      // 记录当前的图片索引
      var index = 0
      // 记录当前 小圆点
      var circle = 0
      // 图片宽度
      var boxWidth = box.width()

      // 点击切换小圆点
      $('ol>li').click(function (e) {
        // 如果当前是克隆的最后一张图片，如果点击第一个小圆点，需要快速跳到第一张
        if (index === ul.children().length - 1) {
          ul.css('left', 0)
          index = $(this).attr('index')
          ol.children().eq(index).trigger('click')
        } else {
          index = $(this).attr('index')
          $(this).siblings().removeClass('current').end().addClass('current')
          myAnimate(ul, -(index * boxWidth))
        }
      })

      // 克隆第一张图片
      var first = ul.children('li:first').clone(true)
      first.appendTo(ul)

      // 右侧箭头点击
      arrowRight = $('.arrow_right')
      arrowRight.click(function () {
        if (index === ul.children().length - 1) {
          ul.css('left', 0)
          index = 0
        }
        index++
        myAnimate(ul, -(index * boxWidth))
        circle = index === ul.children().length - 1 ? 0 : index
        ol.children().eq(circle).siblings().removeClass('current').end().addClass('current')
      })

      // 左侧箭头点击
      arrowLeft = $('.arrow_left')
      arrowLeft.click(function () {
        if (index === 0) {
          index = ul.children().length - 1
          ul.css('left', -index * boxWidth)
        }
        index--
        myAnimate(ul, -(index * boxWidth))
        circle = index === ul.children().length - 1 ? 0 : index
        ol.children().eq(circle).siblings().removeClass('current').end().addClass('current')
      })

      //自动播放
      var timeId = setInterval(() => {
        arrowRight.trigger('click')
      }, 3000);

      // 缓慢动画函数
      function myAnimate(ele, target, call) {
        // 重要，不然会出现抖动
        clearInterval(ele.timeId)
        ele.timeId = setInterval(function () {
          if (target - ele.position().left === 0) {
            clearInterval(ele.timeId)
            if (call) {
              call()
            }
          }
          var step = (target - ele.position().left) / 10
          // 步长需要取整
          step = step > 0 ? Math.ceil(step) : Math.floor(step)
          ele.css({
            'left': ele.position().left + step
          })
        }, 30);
      }
    })
  </script>
</body>

</html>