js实现的轮播图

  <div class="swap">
    <ul class="imgList clearfix">
      <li><img src="../../images/1.png" alt=""></li>
      <li><img src="../../images/2.png" alt=""></li>
      <li><img src="../../images/3.png" alt=""></li>
      <li><img src="../../images/4.png" alt=""></li>
      <li><img src="../../images/5.png" alt=""></li>
      <li><img src="../../images/6.png" alt=""></li>
    </ul>
    <ul class="curcle">
    </ul>
    <span class="leftArrow">&lt;</span>
    <span class="rightArrow">></span>
  </div>

  * {
    padding: 0;
    margin: 0;
  }

  .swap {
    position: relative;
    width: 500px;
    overflow: hidden;
    margin: 100px auto;
  }

  .clearfix::after {
    content: '.';
    height: 0;
    visibility: hidden;
    clear: both;
    display: block;
  }

  /*图ul*/
  ul {
    list-style: none;
  }

  .swap .imgList {
    overflow: hidden;
    position: relative;
  }

  .swap .imgList li {
    float: left;
  }

  .swap .imgList li img {
    width: 500px;
    float: left;
  }

  /*圆点*/
  .curcle {
    position: absolute;
    width: 150px;
    height: 20px;

    bottom: 8px;
    left: 50%;
    margin-left: -75px;
  }

  .curcle li {
    width: 12px;
    height: 12px;
    border: 1px solid #eee;
    border-radius: 50%;
    float: left;
    margin: 3px;
    cursor: pointer;
  }

  .red {
    background-color: #f44;
  }

  .curcle li:first-child {

    margin-left: 27px;
  }

  .leftArrow,
  .rightArrow {
    position: absolute;
    font-size: 18px;
    line-height: 30px;
    width: 18px;
    top: 50%;
    text-align: center;
    background-color: rgba(0, 0, 0, .2);
    margin-top: -15px;
    color: #fff;
    display: none;
    cursor: pointer;
  }

  .rightArrow {
    right: 0;
  }

var swap = document.querySelector('.swap')
    var imgUl = document.querySelector('.imgList')
    var imgList = imgUl.querySelectorAll('li')
    var curcle = document.querySelector('.curcle')
    var leftArrow = document.querySelector('.leftArrow')
    var rightArrow = document.querySelector('.rightArrow')
    var loop = 0;
    var flag = true
    for (let i = 0; i < imgList.length; i++) {
      var smallCurcle = document.createElement('li')
      curcle.appendChild(smallCurcle)
    }
    var curcleList = curcle.querySelectorAll('li')
    curcleList[0].className = 'red'
    imgUl.style.width = imgList.length * imgList[0].offsetWidth + 'px'

    function run() {
      timer = setInterval(function () {
        loop++
        changeColor()
        if (loop == imgList.length) {
          loop = 0;
          imgUl.style.transition = ''
        } else {
          imgUl.style.transition = 'all 0.5s'
        }
        imgUl.style.marginLeft = -imgList[loop].offsetWidth * loop + 'px'
      }, 3000)
    }
    run()
    swap.addEventListener('mouseover', function () {
      toggle(leftArrow, true)
      toggle(rightArrow, true)
    })
    swap.addEventListener('mouseout', function () {
      toggle(leftArrow, false)
      toggle(rightArrow, false)
    })

    function toggle(el, isShow) {
      isShow ? el.style.display = 'block' : el.style.display = 'none'
    }
    leftArrow.addEventListener('click', function () {
      if (flag) {
        flag = false
        if (imgUl.offsetLeft <= -imgList[0].offsetWidth) {
          imgUl.style.transition = 'all 0.5s'
          imgUl.style.marginLeft = imgUl.offsetLeft + imgList[0].offsetWidth + 'px'
          loop--
        } else {
          imgUl.style.transition = ''
          imgUl.style.marginLeft = (imgList.length - 1) * -imgList[0].offsetWidth + 'px'
          loop = imgList.length - 1
        }
        changeColor()
        clearInterval(timer)
        run()
        setTimeout(function () {
          flag = true
        }, 500)
      }
    })
    rightArrow.addEventListener('click', function () {
      if (flag) {
        flag = false
        if (imgUl.offsetLeft > -imgList[0].offsetWidth * (imgList.length - 1)) {
          imgUl.style.transition = 'all 0.5s'
          imgUl.style.marginLeft = imgUl.offsetLeft - imgList[0].offsetWidth + 'px'
          loop++
        } else {
          imgUl.style.transition = ''
          imgUl.style.marginLeft = 0 + 'px'
          loop = 0
        }
        changeColor()
        clearInterval(timer)
        run()
        setTimeout(function () {
          flag = true
        }, 500)
      }
    })

    function changeColor() {
      for (let i = 0; i < curcleList.length; i++) {
        curcleList[i].className = ''
      }
      if (loop == imgList.length) {
        curcleList[0].className = 'red'
      } else {
        curcleList[loop].className = 'red'
      }
    }
    for (let i = 0; i < curcleList.length; i++) {
      curcleList[i].addEventListener('click', function () {
        loop = i
        imgUl.style.transition = 'all 0.5s'
        imgUl.style.marginLeft = -imgList[loop].offsetWidth * loop + 'px'
        changeColor()
        clearInterval(timer)
        run()
      })
    }