js原生轮播图渐隐渐现效果

html

<div id="wrap">
    <img src="9b29b4e71f89e2f075569a1de1b43ea2.jpg" alt="1" class="img1"/>
    <img src="89e32abb2acf395f69ce3568eea27730.jpeg" alt="2"/>
    <img src="739e7698e541448ace40bb6c905b6e5e.jpg" alt="3">
    <img src="e6624481379d114fa0f45d48d6520659.jpg" alt="4"/>
    <ul id="leadBtn">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

css

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            opacity: 0;
            width: 300px;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
        }
        #wrap {
            position: relative;
            margin: 100px 200px;
            width: 300px;
            height: 0;
            padding-bottom: 27%;
        }
        .img1 {
            opacity: 1;
        }
        ul li {
            width: 8px;
            height: 8px;
            background-color: rgba(0,0,0,.5);
            list-style: none;
            display:inline-block;
            margin: 5px;
            border-radius: 50%;
        }
        #leadBtn {
            z-index: 999;
            position: absolute;
            bottom: 0;
            left: 35%;
            text-align: center;
        }
        .active {
            background-color: #fff;
        }
        .leave {
            background-color: rgba(0,0,0,.5);
        }
        .fadeIn {
            opacity: 0;
            transition: all 3s;
        }
        .fadeOut {
            opacity: 1;
            transition: all 3s;
        }

js

<script>
    var imgs = document.querySelectorAll("img"),
        wrap = document.getElementById("wrap"),
        li = document.querySelectorAll("li"),
        index = 0;

    function loop(){
        var timer = setInterval(function(){
            //如果是最后一张
            if(index == imgs.length-1){
                imgs[index].className = "fadeIn";
                li[index].className = "leave";
                index = -1;
            }else {
                //显示下一张隐藏本张
                imgs[index].className = "fadeIn";
                li[index].className = "leave";
                index++;
                imgs[index].className = "fadeOut";
                li[index].className = "active"
            }
            //重新跳回第一张
            if(index == -1){
                index++;
                imgs[index].className = "fadeOut";
                li[index].className = "active"
            }
        },3000)

        for(let i = 0;i < li.length;i++){
            li[i].onmouseover = function(){
                clearInterval(timer)
                this.className = "active";
                imgs[i].className = "fadeOut";
                if(index != i){
                    li[index].className = "leave";
                    imgs[index].className = "fadeIn";
                }
            }
            li[i].onmouseout = function(){
                index = i;
                loop();
            }
        }
    }
    loop();
</script>