做得轮播图 for循环 display:none 有点问题求指点路口师傅

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图 for循环 display:none 路口师傅</title>
</head>
<body>
  <div id="container">
    <div id="flo">
      <ul>
        <li class="li li1">A</li>
        <li class="li li2">B</li>
        <li class="li li3">C</li>
        <li class="li li4">D</li>
        <li class="li li1">E</li>
      </ul>
        </div>
    <div class="box">111</div>
    <div class="box">222</div>
    <div class="box">333</div>
    <div class="box">444</div>
    <div class="box">555</div>
  </div>
 <!--1870779674@qq.com-->
</body>
</html>

HTML

xxxxxxxxxx
 
var oBox = document.getElementsByClassName('box');
var oLi = document.getElementsByClassName('li');
var ii = -1;
var add = 1;
  for(var i=0;i < oLi.length;i++){
    oLi[i].index = i;
    oLi[i].onclick=function(){
      for(var i=0;i < oBox.length;i++){
        oBox[i].style.display = "none";
      }
      oBox[this.index].style.display = "block";
      ii = this.index-1;
    }
  }
    var con = document.getElementById('container');
      con.onmouseover=function(){
        add = 0;
      }
      con.onmouseout=function(){
        add = 1;;
      }
    
function sw(){
  var timer = setInterval(function(){
    ii = ii+add;
    for(var i=0;i < oBox.length;i++){
      oBox[i].style.display = "none";
    }
      oBox[ii].style.display = "block";
    if(ii>=4){
      ii = -1;
    }
  },1500);
}
sw();

JavaScript

xxxxxxxxxx
 
#container{
  width:200px;
  height:100px;
  border:1px solid red;
  overflow:hidden;
  position:absolute;
}
ul{
  margin:0;
  padding:0;
  
}
li{
  list-style:none;
  float:left;
  display:inline-block;
  width:25px;
  border:1px solid blue;
  text-align:center;
  cursor:pointer;
}
.box{
  width:198px;
  height:98px;
  border:1px solid blue;
  display:none;
}
.box{
  display:block;
}
#flo{
  position:absolute;
  right:1px;
  bottom:1px;
}

CSS