js实现轮播效果

效果简述
1.自动录播
2. 鼠标悬浮 轮播暂停
3. 鼠标离开，轮播继续
4. 点击< 和 > 实现上一页轮播和下一页轮播

 const arr = [
            {text:"这里是red", color:"red"},
            {text:"这里是orange", color:"orange"},
            {text:"这里是blue", color:"blue"},
            {text:"这里是green", color:"green"},
        ]
        let num = 0
        const lis = document.querySelectorAll("li")
        const h4 = document.querySelector("h4")
        const inner = document.querySelector(".inner")
        function changeobj (index){
            lis.forEach(item => {
                if(item.classList.contains("active")) 
                    item.classList.remove("active")
            })
            lis[index].classList.add("active")
            h4.innerText = `这里是什么颜色:${arr[index].text}`
            inner.style.backgroundColor = arr[index].color
        }

        let timer = setInterval(()=>{
            changeobj(num);
            if(num == arr.length-1){
                num = 0;
            }else {
                num++ ;
            }
        },1000)

        //鼠标悬浮 停止播放
        const box = document.querySelector(".box")
        box.addEventListener("mouseenter", ()=>{
            clearInterval(timer)
        })
        //鼠标离开 继续播放
        box.addEventListener("mouseleave", ()=>{
            timer = setInterval(()=>{
                changeobj(num);
                if(num == arr.length-1){
                    num = 0;
                }else {
                    num++ ;
                }
            },1000)
        })

        //上一页  下一页
        const upstep = document.querySelector(".step span:first-child")
        const downstep = document.querySelector(".step span:last-child")
        upstep.addEventListener("click", ()=>{
            if(num == 0 ){
                num = arr.length-1;
            }else {
                num--;
            }
            changeobj(num);
        })

        downstep.addEventListener("click", ()=>{
            if(num == arr.length -1){
                num = 0;
            }else {
                num++;
            }
            changeobj(num);
        })

        ul {
            display: flex;
            justify-content: space-around;
            width: 200px;
        }
        ul li {
            list-style: none;
            width: 20px;
            height: 20px;
            border-radius: 15px;
            background-color: antiquewhite;
            transition: 0.4s;
        }
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .inner {
            width: 300px;
            height: 300px;
            margin: auto;
            border: 1px solid orange;
        }
        .active {
            background-color:aqua;
            transform: scale(1.2);
        }
        .step {
            position: absolute;
            bottom: 50px;
            right: 20px;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 10px;
        }
        .step span {
            cursor: pointer;
        }

   <div class="box">
    <div class="inner"></div>
    <h4>这里是什么颜色</h4>
    <div class="step">
        <span> &lt; </span>
        <span> &gt; </span>
    </div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
   </div>