用javascript实现轮播图淡入淡出效果

 <div class="swiper-container">
            <div class="swiper-wrapper">
                <img src="../image/1.jpg" alt="">
                <img src="../image/2.jpg" alt="">
                <img src="../image/3.jpg" alt="">
                <img src="../image/4.jpg" alt="">
                <img src="../image/5.jpg" alt="">
            </div>
        </div>

.swiper-container{
    position: relative;
}
.swiper-wrapper{
    position: absolute;
}
.swiper-wrapper img{
    display:block;
    position: absolute;
}

window.onload=function(){
    let swiperContainer = document.getElementsByClassName('swiper-container')[0];    
    let wrap=document.getElementsByClassName("swiper-wrapper")[0];  
    let wrapImg = document.getElementsByClassName("swiper-wrapper")[0].getElementsByTagName('img')
 //获取屏幕的宽度
    let windowWidth = window.screen.width;
    let wrapImgLeng = wrapImg.length;
    let timer=null;
    let index = -1;
//屏幕宽度
    for(let i = 0 ;i < wrapImgLeng;i++){
          wrapImg[i].style.width = windowWidth +'px'
      }
//淡入淡出效果，用的是层级的一个循环
    function swiper(){
        clearInterval(timer);
        opacity=1;
        if(++index == wrapImgLeng){
            index=0;
        }
        for(let i=0;i<wrapImgLeng;i++){
            wrapImg[i].style.opacity=1;
            if(index!=i){
                wrapImg[i].style.zIndex=1;
            }
        }
        timer=setInterval(function(){
            if(opacity<=0){
                clearInterval(timer);
                setTimeout(function(){
                    swiper();
                },3000);
            }
            opacity -=0.01;
            console.log(index)
            wrapImg[index].style.zIndex=3;
            wrapImg[index].style.opacity=opacity;
            if(index == wrapImgLeng -1){
                wrapImg[0].style.zIndex=2;
            }else{
                wrapImg[index+1].style.zIndex=2;
            }
        },30);
    }
swiper();
}