SOURCE

window.onload = function() {
  var box = document.getElementById('box');
  var img = box.getElementsByTagName('img');
  var li = box.getElementsByTagName('li');
  var x = 0;

  //控制图片自动轮播的函数哦
  function paolu() {
    x++;
    if (x == 5) { //这里是让变量X判断，当等于5的时候让X自动回到0再自增
      x = 0;
    }
    for (var i = 0; i < 5; i++) { //这里循环是让img图片先隐藏和下面的小圆圈变白色
      img[i].style.display = 'none';
      li[i].style.background = '#fff';
    }
    img[x].style.display = 'block'; //这里是让img[i]图片显示
    li[x].style.background = 'blue'; //这里是让小圆圈变蓝色
  }

  var timer = setInterval(paolu, 1500)

  for (var i = 0; i < li.length; i++) { //循环遍历小圆圈li
    li[i].xuhao = i;

    li[i].onmouseover = function() { //当鼠标移入到遍历的li[i]的时候触发的函数
      // alert(this.xuhao);
      x = this.xuhao;
      //先清理定时器
      clearInterval(timer);
      //然后让所有的img隐藏，小圆圈变白色
      for (var i = 0; i < 5; i++) { //这里循环是让img图片先隐藏和下面的小圆圈变白色
        img[i].style.display = 'none';
        li[i].style.background = '#fff';
      }
      img[x].style.display = 'block';
      li[x].style.background = 'blue';

    }

    li[i].onmouseout = function() {
      timer = setInterval(paolu, 1500);
    }
  }
}

<div id="box">
  <img src="1.png" style="display:block;">
  <img src="2.png">
  <img src="3.png">
  <img src="4.png">
  <img src="5.png">
  <ul>
    <li style="background:blue;">
    </li>
    <li>
    </li>
    <li>
    </li>
    <li>
    </li>
    <li>
    </li>
  </ul>
</div>

*,
ul,
li,
img {
  padding: 0;
  margin: 0;
}

#box {
  width: 800px;
  height: 400px;
  /*border: 1px solid red;*/
  margin: 50px auto;
  position: relative;
}

#box img {
  position: absolute;
  left: 0px;
  top: 0px;
  display: none;
}

ul {
  list-style: none;
  width: 200px;
  height: 30px;
  /*border: 1px solid pink;*/
  position: absolute;
  left: 300px;
  bottom: 20px;
}

ul li {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #fff;
  float: left;
  margin-right: 10px;
}