渐隐渐现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;list-style-type:none}
        .banner{
            width:600px;
            height:400px;
            border:10px solid #333;
            border-radius:15px;
            margin:100px auto;
            position:relative;
        }
        .banner>ul{
            width:100%;
            height:100%;
            position:relative;
        }
        .banner>ul>li{
            width:100%;
            height:100%;
            text-align:center;
            line-height:400px;
            font-size:200px;
            color:#fff;
            position:absolute;
            left:0;
            top:0;
            opacity:0;
            transition: opacity 0.5s linear;
        }
        .banner>ul>li.active{
            opacity:1;
        }
        .banner>ol{
            width:175px;
            padding-right:15px;
            position:absolute;
            left:50%;
            bottom:30px;
            margin-left:-95px;
            background-color: rgba(0,0,0,0.5);
            height:25px;
            padding-top:5px;
        }
        .banner>ol>li{
            width:20px;
            height:20px;
            float:left;
            background-color: #fff;
            border-radius:50%;
            margin-left:15px;
            cursor:wait;
        }
        .banner>ol>li.active{
            background-color: greenyellow;
        }
        .banner>div{
            width:100%;
            height:60px;
            position:absolute;
            left:0;
            top:50%;
            margin-top:-30px;
        }
        .banner>div>p{
            float:left;
            text-align:center;
            width:40px;
            height:100%;
            line-height:60px;
            color:#fff;
            background-color: grey;
        }
        .banner>div>.right{
            float:right;
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul class="imgBox">
            <li class="active" style="background-color:gainsboro">1</li>
            <li style="background-color:rgb(219, 48, 48)">2</li>
            <li style="background-color:rgb(229, 233, 8)">3</li>
            <li style="background-color:rgb(38, 9, 206)">4</li>
            <li style="background-color:rgb(15, 227, 235)">5</li>
        </ul>
        <ol>
        </ol>
        <div>
            <p class="left"><</p>
            <p class="right">></p>
        </div>
    </div>
    <script>
        const imgBox=document.querySelector('.banner>ul')
        const focusBox=document.querySelector('.banner>ol')
        const banner=document.querySelector('.banner')

        setFocus()
        let index=0;
        let timer;
        automatic()
        overOut()
        bindEvent()
        maintenance()
        function maintenance(){
            document.addEventListener('visibilitychange',function(){
                if(document.visibilityState === 'hidden') clearInterval(timer)
                if(document.visibilityState === 'visible') automatic()
            })
        }
        function bindEvent(){
            banner.addEventListener('click',(e)=>{
                if(e.target.className === 'left') vary(false)
                if(e.target.className === 'right') vary(true)
                if(e.target.className === 'focus'){
                    console.log(i=e.target.dataset.index/1,typeof i)
                    vary(i)
                }
            })
        }
        function overOut(){
            banner.addEventListener('mouseover',function(){
                clearInterval(timer)
            })
            banner.addEventListener('mouseout',function(){
                automatic()
            })
        }
        function automatic(){
            timer=setInterval(()=>{
                vary(true)
            },1000)
        }
        function vary(flag=true){
            imgBox.children[index].classList.remove('active')
            focusBox.children[index].classList.remove('active')
            // flag ? ++index : --index
            switch(flag){
                case true:
                    ++index
                    break
                case false:
                    --index
                    break
                default:
                    index=flag
            }
            if(index>=imgBox.children.length) index=0
            if(index<0) index=imgBox.children.length-1
            imgBox.children[index].classList.add('active')
            focusBox.children[index].classList.add('active')
        }
        function setFocus(){
            const num=imgBox.children.length
            const frg=document.createDocumentFragment()
            for(let i=0;i<num;++i){
                const li=document.createElement('li')
                li.classList.add('focus')
                li.dataset.index=i
                if(i===0) li.classList.add('active')
                frg.appendChild(li)
            }
            focusBox.appendChild(frg)
            focusBox.style.width=num*35+'px'
            focusBox.style.marginLeft=-focusBox.offsetWidth/2+'px'
        }
    </script>
</body>
</html>