比较好的一个轮播图（带有两边箭头的）-CSDN博客

/* 案例banner左右切换效果*/
    var $box=$(".img_box1");
 // var timer;
   $(".next_right").click(function(){
      // clearInterval(timer);
        $box.animate({marginLeft:'-1499px'},500,function () {
            $(".img_box1>div").eq(0).appendTo($box);// 往左移一次下次就要看到第三个
            $box.css({marginLeft:"0px"})
        })
    }) ;
    $(".next_left").click(function () {
        clearInterval(timer);
        $box.css({marginLeft:"-1499px"});//往右移一次 之后下一次就要看到第三个
        $(".img_box1>div").eq(2).prependTo($box);
        $box.animate({marginLeft:'0px'},500)
    });


    var Timer=function(){
        timer=setTimeout(function(){
            $box.animate({marginLeft:'-1499px'},500,function () {
                $(".img_box1>div").eq(0).appendTo($box);// 往左移一次下次就要看到第三个
                $box.css({marginLeft:"0px"})
            })
            Timer();
        },3000)
    }
    Timer();
    $(".banner").hover(function(){
        clearTimeout(timer);
    },function(){
        Timer();
    })

html部分

<div class="banner">
    <div class="img_box1">
        <div>
            <img src="../images/case-banner.jpg" alt="" class="img1">
        </div>
       <div>
           <img src="../images/case-banner-2.jpg" alt="" class="img2">
       </div>

       <div>
           <img src="../images/case-banner-3.jpg" alt="" class="img3">
       </div>

    </div>
    <div class="next_left"></div>
    <div class="next_right"></div>
</div>

css部分

.banner{
    width: 100%;
  /* height: 586px;*/
    height: 620px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.clear{
    clear: both;
}
.img_box1{
    width: 4497px;
    height: 100%;

    display: flex;
}
.img_box1>div{
    width: 100%;
    height: 100%;
    flex-shrink: 1;
}
.img_box1 img{
    width: 100%;
    float: left;

}
.next_right,.next_left{
    width: 30px;
    height: 40px;
    opacity: 0.5!important;
    z-index: 111111;
    position: absolute;
    -webkit-transition: all 0.3s ease ;
    -moz-transition: all 0.3s ease ;
    -ms-transition: all 0.3s ease ;
    -o-transition: all 0.3s ease ;
    transition: all 0.3s ease ;
    background: url("../images/next-highlight.png") no-repeat;
}
.next_left{
   top: 49%;
    left: 10%;
   background-position:  center left;
}
.next_right{
   top: 49%;
    right: 10%;
    background-position: center right ;
}
.next_left:hover,.next_right:hover{
    opacity: 1!important;

}