轮播图jq

 img{
            display: block;
        }
        li{
            list-style: none;
        }
        .box{
            width: 800px;
            margin: 50px auto;
            display: flex;
            position: relative;
        }
        .box1-1{
            width: 800px;
            /* overflow: hidden; */
            display: flex;
            overflow: hidden;
        }
        .box1-1 > img{
            width: 100%;
            position: relative;
        }
        
        .left ,.right{
            background: rgb(0, 0, 0, 0.3);
            width: 50px;
            height: 100px;
            font-size: 50px;
            font-weight: normal;
            text-align: center;
            color: rgb(255, 255,255,.3);
            line-height: 90px;
            transition: background-color .3s;
            cursor: pointer;
        }
        .left:hover ,.right:hover{
            color: #fff;
            background: rgb(0, 0,0,.5);
        }
        .left{
            position: absolute;
            left: 0;
            top: 40%;
        }
        .right{
            position: absolute;
            right: 0;
            top: 40%;
        }
        .dot {
            width: 800px;
            height: 100px;
            cursor: pointer;
        }
        .dot > ul{
            position: absolute;
            left: 45%;
            bottom: 5%;
        }
        .dot > ul > li{
            width: 10px;
            height: 10px;
            border-radius: 15px;
            background: #ffffff93;
            margin-right: 20px;
            float: left;
        }
        .active{
            background: #fff  !important;
        }

<div class="box">
        <!-- 图片 -->
        <div class="box1">
            <div class="box1-1">
                <img src="./imgs/f1.jpg" alt="">
                <img src="./imgs/f2.jpg" alt="">
                <img src="./imgs/f3.jpg" alt="">
                <img src="./imgs/f4.jpg" alt="">
            </div>
            <div class="arrow">
                <div class="left">&lt;</div>
                <div class="right">&gt;</div>
            </div>
        </div>
        <!-- 箭头 -->
        <!-- 圆点 -->
        <div class="dot">
            <ul>
                <li class=" d active"></li>
                <li class="d"></li>
                <li class="d"></li>
                <li class="d"></li>
            </ul>
        </div>
    </div>

 var imgw = $('.box1-1 img').innerWidth  //获取img的宽度
        
        var n = 0
          time = setInterval(function(){
                auto()
               
            },2000)

        // 轮播效果
        function auto(){
            $('.box1-1').animate({left:-imgw},function(){
                // img移到左边后排到这个队列的最后
                $(this).css('left',0).find('img:first').appendTo(this)   //这个img的左边为0，并且添加到当前队列
                console.log($(this));
            })
            n++;
            if(n > 3){
                n = 0
            }
            $('.d').eq(n).addClass('active').siblings('.d').removeClass('active')
        }
       
        // 鼠标移到box上时，轮播暂停
        $('.box1').hover(function(){
            clearInterval(time)
        },function(){
            time = setInterval(function(){
                auto()  
            },2000)
        })

        // 左右箭头
        $('.right').click(function(){
            auto()
        })

        $('.left').click(function(){
            // 1.现将img向左移除一个img的宽度，同时，将显示在最后一个img追加到box1-1最前面
            // 2.执行动画img的left为0最后一个img带回
            $('.box1-1').css('left',-imgw).find('img:last').prependTo('.box1-1')
            $('.box1-1').animate({left:0})
            n--
            if(n < 0){
                n = 3
            }
            $('.d').eq(n).addClass('active').siblings('.d').removeClass('active')
        })
       
        // 点击小圆点
        $('.dot ul li').each(function(index){
            // console.log(this);
            $(this).click(function(){
                if(n < index){
                    for(var i = n ;i <index;i++){
                            $('.box1-1').animate({left:-imgw},function(){
                            $(this).css('left',0).find('img:first').appendTo(this)   
                        })
                    }
                }else if(n > index){
                    for(var i = n ;i > index;i--){
                        $('.box1-1').css('left',-imgw).find('img:last').prependTo('.box1-1')
                        $('.box1-1').animate({left:0})
                    }
                }
                n = index
                $('.d').eq(n).addClass('active').siblings('.d').removeClass('active')
            })
        })