简单轮播图效果

html简单的轮播图效果
html：

<div class="lunbo">
			<div id="da">
			        <div class="tu">
			            <ul>
			                <li><img src="img/1.png" alt=""></li>
			                <li><img src="img/2.jpg" alt=""></li>
			                <li><img src="img/3.jpg" alt=""></li>
			                <li><img src="img/4.jpg" alt=""></li>
			                <li><img src="img/5.png" alt=""></li>
			            </ul>
			            <ol>
			                <li></li>
			                <li></li>
			                <li></li>
			                <li></li>
			                <li></li>
			            </ol>
			        </div>
			    </div>
		</div>

css样式：

.lunbo{
	width: 1000px;
	margin:  auto;
}


#da{
  width: 1000px;
  height: 500px;
  margin-top: 10px;
  align-items: center;
  margin: 5% auto;
  margin-top: 0%;
}
.tu{
  position: relative;
  height: 400px;
}
.tu ul{
  list-style-type:none ;
}
.tu ul>li{
  width: 600px;
  height: 300px;
  position: absolute;

  transition: 1s;
  opacity: 0;
}
.tu ul>li img{
  width: 1000px;
  height: 500px;
  margin-top:20px;
  
 
}
#da ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5,35px);
  grid-template-rows: auto;
  grid-gap: 1em;gap: 1em;
  float: right;
  margin-top: 450px;
  list-style: none;
  top:0;left:0;
}
#da ol li {
  width: 10px;
  height: 10px;
  font-size: 15px;
  line-height: 20px;
  float: left;
  text-align: center;
  border-radius: 2em;
  border: 1px solid #999999;
}
.da img{
	width: 100%;
}

JavaScript：

window.onload = function(){
  var box=this.document.getElementsByClassName("tu")[0];
  var lik=box.getElementsByTagName("li");
  function fun(i,j){//转换图片函数，就是把透明度改了一下
    lik[i].style.opacity=1;
    lik[j].style.opacity=0;
    lik[i+5].style.backgroundColor="#ffffff";//改一下小图标
    lik[j+5].style.backgroundColor="#00000000"
  }
  fun(0,1);//初始化下
  var i =0;
  function auto(){//轮播循环函数
    if(++i>=5){
      i=0;
      fun(0,4);
    }
    else fun(i,i-1);
  }
  timer=this.setInterval(auto,2000);
  box.onmouseover = function () { //鼠标划上去，停止轮播
    console.log('good');
    clearInterval(timer);
  }
  box.onmouseout = function () { //鼠标划出，继续轮播
    timer = setInterval(auto, 2000); //调用定时器
  }
  var j =0;
  for(;j<5;j++){//点击小图标也可以转换图片
    lik[j+5].ind=j;
    lik[j+5].onclick=function(){
      fun(this.ind,i)
      i=this.ind;
    }
  }

效果图：