我自己的逻辑做的轮播图，感觉还不错，拓展性还是比较高的，分享一下附完整源码

此轮播图是dom结构是一个显示图片的父盒子，两个装图片的子盒子

利用js改变每个盒子的图片地址，和动画样式来实现动态变化

下面是全部代码，注意图片的路径和名称需要自己更换，新手交流，不懂可以留言 

css代码

 <style>
        *{
            padding: 0;
            right: 0;
            list-style:none;;
        }
        /* 从右向左移入动画 */
        @keyframes right-left-go-move {
            from {
                right: -500px;
            }

            to {
                right: 0px;
            }

        }

        /* 从右向左移出画面 */
        @keyframes right-left-out-move {
            from {
                right: 0px;
            }

            to {
                right: 500px;
            }
        }

        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 300px;
            border: 1px solid black;
            overflow: hidden;
        }

        img {
            position: absolute;
            /* float: left; */
            width: 500px;
            height: 300px;
            vertical-align: bottom;
            /* z-index: 1; */
        }
        #photo1{
            z-index: 1;
        }
        ul{
            position: absolute;

            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);

            width: 107px;
            height: 12px;
            /* border: 1px solid black; */
            z-index: 10;
        }
    
        li{
            float: left;
            margin-left: 5px;
            width: 12px;
            height: 12px;
            border: 1px solid gray;
            border-radius: 6px;
            box-sizing: border-box
        }

    </style>

 html代码

<!--显示图片父盒子-->
<div class="box">
        <!--图片小圆点，无序列表-->
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!--装图片的盒子-->
        <img id="photo1" src="../xiaomi1.webp" style="animation-name: right-left-go-move">
        <img id="photo2" src="../xiaomi2.webp" style="animation-name: right-left-out-move">
    </div>

js代码

 <script>
        // photo1用来出，photo2用来进
        const photoElm1 = document.getElementById('photo1')
        const photoElm2 = document.getElementById('photo2')
        const lisElm = document.getElementsByTagName('li')
        // lisElm = Array.from(lisElm);
        let num = 2
        let liNum=0
        let goOrOut = 'out'
        let liStyleWaitTimeout
        
        lisElm[liNum].style.backgroundColor ='gray'
       
        // 改变图片定时器
        let photoChaneInterval = setInterval(photoChane,3000)


        // 鼠标移入图片圆点事件
        for(let i=0; i<lisElm.length; i++){
            lisElm[i].addEventListener('mouseover',function(){
                //移入的图片变为灰色
                lisElm[i].style.backgroundColor='gray'
                // 其他的变为无色
                for(let n=0; n<lisElm.length; n++){
                    if(n!==i){
                        lisElm[n].style.backgroundColor=''
                    }
               }
                // 停止图片变化
                clearInterval(photoChaneInterval)
                // 背景图片随之变为对应的图片，如果是奇数，则photo1变化反之2变化
                // 当photo1 animationName为go时，photo1在显示框，所以photo1变化，反之，2变化
                if(photoElm1.style.animationName==='right-left-go-move'){
                    console.log(photoElm1.style.animationName)
                    photoElm1.src = '../xiaomi' +(i+1)  + '.webp'
                    num = i+2
                }else{
                    console.log(photoElm1.style.animationName)
                    photoElm2.src = '../xiaomi' +(i+1)  + '.webp'
                   num = i+2
                }
            })

            lisElm[i].addEventListener('mouseout',function(){
                // lisElm[i].style.backgroundColor=''
                // 开始图片变化
                photoChaneInterval= setInterval(function(){
                    // 图片变化
                    photoChane()
                    // 样式消失
                    lisElm[i].style.backgroundColor=''    
                },3000)                
            })
        }
   
        //自动改变图片方法
        function photoChane() {
            if (num >6) {
                num = 1
            }     

            // 清除 出去的 图片的圆点 的背景颜色
            lisElm[liNum].style.backgroundColor =''
            // 给下一个进去图片对应的圆点添加背景颜色
            liNum = num-1 
            lisElm[liNum].style.backgroundColor ='gray'

             // 动画必须同步进行
            //前面的出去，后面的进来，并且出去后下一次就是进来
            photoElm1.style.animation = 'right-left-' + goOrOut + '-move 3s ease forwards '
    
            //取反前面的进去，另一个就要出来，反之，前面的出来后面的就要进去
            goOrOut = (goOrOut === 'go' ? 'out' : 'go')

            // 后面的添加进入动画
            photoElm2.style.animation = 'right-left-' + goOrOut + '-move 3s ease forwards'


            // 每一个在框里的就不变，即出去（out）的图片不需要变化
            if(photoElm1.style.animationName==='right-left-go-move'){
                photoElm1.src = '../xiaomi' + num + '.webp'
            }
             else{
                console.log(photoElm2.style.animationName)
                photoElm2.src = '../xiaomi' + num + '.webp'
           }
            // console.log(photoElm.src)
            console.log(photoElm1)
            num++
        }
 
    </script>