原生js实现轮播图淡入淡出效果

gif 图片大于5m不让上传，压缩后图片清晰度就成这了。。。
原理解释如下：一个显示框，将所有图片堆叠在一起并设置为透明度为0，要显示的图片类透明度设置为1，动画执行时间0.8秒，这就是淡入淡出效果的原理，采用定时器下标每隔3s增加一次，移除本次的class属性，为下一张图片添加class属性，
html代码

<div id="main">
      <div id="banner">
        <img src="images/1.jpg" alt="" class="ban-img show"/>  //要显示的图片class为show
        <img src="images/2.jpg" alt="" class="ban-img" />
        <img src="images/3.jpg" alt="" class="ban-img" />
        <img src="images/4.jpg" alt="" class="ban-img" />
      </div>
      <div class="direction" id="pre"><img src="images/pre.png" alt=""></div>  
      <div class="direction" id="next"><img src="images/next.png" alt=""></div> 
      <div id="cir">
          <ul>
            <li class="li-show"></li>     //要显示小圆点类设置
            <li></li>                       
            <li></li>                     //底部小圆点和图片轮播原理相同
            <li></li>
        </ul>
    </div>
    </div>

css代码如下

* {
    padding: 0;
    margin: 0;
    list-style: none;
}

#main {
    margin: 100px 25%;
    position: relative;
}

#banner {
    display: flex;
    z-index: -1;
    cursor: pointer;
    
}

.ban-img {
    width: 50vw;
    height: 60vh;
    opacity: 0;       //透明度设置为0
    position: absolute;
    transition: all linear 0.8s;  //动画执行时间，淡入淡出效果
}

.show {
    opacity: 1;    //显示图片透明度为1
} 
#cir{
    position: absolute;
    left: 35%;           //小圆点位置
    top: 390px;
}
li{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    display: inline-block;
    margin: 20px;
    z-index: 9999;
    cursor: pointer;
}
.li-show{
    
    background-color: salmon;
  
}
.direction{
    position: absolute;
    width: 150px;
    height: 100px;
    top: 160px;
    cursor: pointer;
}
.direction:hover{
    top: 170px;
}
#pre{
    left: 0;
}
#next{
    right: 0;
}
.direction img{
    width: 100%;
    height: 100%;
}

js代码如下

const imgs = document.querySelectorAll('.ban-img');
const show = document.querySelector('.show')
const lis = document.querySelectorAll('li');
const main = document.querySelector('#banner')
const pre = document.querySelector('#pre')
const next = document.querySelector('#next')
var imgIndex=0;
var interval=2000;

var timer = setInterval(nextslid,interval);   //图片轮播定时器
lis.forEach(function(li,index){
    li.onmouseover=function(){
        clearInterval(timer)
        
        imgs[imgIndex].classList.remove('show');
        lis[imgIndex].classList.remove('li-show');        //鼠标移入小圆点，删除本次的类
        imgIndex=index;
        imgs[imgIndex].classList.add('show');
        lis[imgIndex].classList.add('li-show');  //序号重新赋值后为新序号设置类
        timer = setInterval(nextslid,interval);
    }
})
function nextslid(){
    let show_img = imgs[imgIndex];
    let show_li = lis[imgIndex];
    show_img.classList.remove('show');             //清除本次图片显示类
    show_li.classList.remove('li-show');
    imgIndex++;
    if(imgIndex>=imgs.length){
        imgIndex=0;                          //如果下标大于数组长度则从0重新开始
    }
    imgs[imgIndex].classList.add('show');
    lis[imgIndex].classList.add('li-show');            //添加下次图片显示类
}
function preslid(){
  
    let show_img = imgs[imgIndex];
    let show_li = lis[imgIndex]
    show_img.classList.remove('show');
    show_li.classList.remove('li-show');
    imgIndex--;
    if(imgIndex<0){
        imgIndex=imgs.length-1;
    }
    imgs[imgIndex].classList.add('show');
    lis[imgIndex].classList.add('li-show');
}
pre.addEventListener('click',preslid);       //点击且切换上一张
next.addEventListener('click',nextslid);         //点击且切换下一张
main.addEventListener("mouseover",()=>clearInterval(timer))    //移入图片，清楚定时器
main.addEventListener("mouseout",()=>timer = setInterval(nextslid,interval))//移出图片，开启定时器