index.html

<div class="banner">
    <div class="box">
        <div class="carousel">
            <!-- 图片可任意张 -->
            <img class="img" src="img/demo1.jpg" />                
            <img class="img" src="img/demo2.jpg" />        
            <img class="img" src="img/demo3.jpg" />           
            <img class="img" src="img/demo4.jpg" />
            <img class="img" src="img/demo5.jpg" />       
            <img class="img" src="img/demo6.jpg" />      
            <img class="img" src="img/demo7.jpg" />       
            <img class="img" src="img/demo8.jpg" />                  
        </div>
    </div>
     <button class="left_btn" onclick="left()">left</button>
     <button class="right_btn" onclick="right()">right</button>
</div>

carousel.js

var imgNub;

$(function(){
    imgNub=$(".carousel .img").size();
    for(i=0;i<imgNub;i++){
            $(".carousel .img:eq("+i+")").attr("imgId",i);
        }
    if(imgNub==1){
            //img3
            for(i=0;i<imgNub;i++){
                    $(".carousel .img:eq("+i+")").addClass("img3");
                }
        }
    if(imgNub==2){
        //img3 4
        for(i=0;i<imgNub;i++){
                $(".carousel .img:eq("+i+")").addClass("img"+(i+3));
            }
        }
    if(imgNub==3){
            //img 2 3 4
            for(i=0;i<imgNub;i++){
                    $(".carousel .img:eq("+i+")").addClass("img"+(i+2));
                }
        }
    if(imgNub>3&&imgNub<6){
            //img 1 2 3 4 (5)
            for(i=0;i<imgNub;i++){
                    $(".carousel .img:eq("+i+")").addClass("img"+(i+1));
                }
        }
    if(imgNub>=6){
            for(i=0;i<imgNub;i++){
                    if(i<5){
                        //img 1 2 3 4 5 
                            $(".carousel .img:eq("+i+")").addClass("img"+(i+1));
                        }else{
                                //img5
                                $(".carousel .img:eq("+i+")").addClass("img5");
                            }
                }
        }
        imgClicked();
});
//右滑动
function right(){
        var fy = [];
        for(i=0;i<imgNub;i++){
            fy[i]=$(".carousel .img[imgId="+i+"]").attr("class");
        }
        console.log(fy);
        for(i=0;i<imgNub;i++){
            if(i==0){
                //最后一个->第一个
                $(".carousel .img[imgId="+i+"]").attr("class",fy[imgNub-1]);
            }else{
                //其他依次后移
                $(".carousel .img[imgId="+i+"]").attr("class",fy[i-1]);
            }
        }
        imgClicked();
    }
//左滑动
function left(){
        var fy=[];
        for(i=0;i<imgNub;i++){
                fy[i]=$(".carousel .img[imgId="+i+"]").attr("class");
            }
        for(i=0;i<imgNub;i++){
                if(i==(imgNub-1)){
                    $(".carousel .img[imgId="+i+"]").attr("class",fy[0]);
                    }else{
                            $(".carousel .img[imgId="+i+"]").attr("class",fy[i+1]);
                        }
            }
        imgClickFy();
    }
//轮播图片左右点击翻页
function imgClicked(){
        $(".carousel .img").removeAttr("onclick");
        $(".carousel .img2").attr("onclick","left()");
        $(".carousel .img4").attr("onclick","right()");
    }

carousel.css

.banner .left_btn{
    position:relative;
    top:-350px;
    height:100px;
    width:80px;
    z-index:10;
}
.banner .left_btn:hover{
    cursor:pointer;
}
.banner .right_btn{
    float:right;
    position:relative;
    top:-350px;
    right:0;
    height:100px;
    width:80px;
    z-index:10;
}
.banner .right_btn:hover{
    cursor:pointer;
}
.banner {
    max-width:1600px;
    min-width:1200px;
    margin:0 auto;
}
.box{
    width:1200px;
    height:455px;
    margin:0 auto;
}
.carousel{
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
}
.carousel .img{
    overflow:hidden;
    position:absolute;
    transition:width 0.4s,height 0.4s,left 0.4s,z-index 0.4s;
}
.carousel .img img{
    width:calc(100%-14px);
    height:calc(100%-14px);
    margin:7px;
}
.carousel .img1{
    width:0px;
    height:0px;
    top:30%;
    left:-50%;
    z-index:1;
}
.carousel .img2{
        width: 500px;
        height: 200px;
        top: 20%;
        left: -20%;
        z-index: 2;
}
.carousel .img3{
        width: 840px;
        height: 340px;
        top: 10%;
        left: 15%;
        z-index: 3;
}
    .carousel .img4{
        width: 500px;
        height: 200px;
        top: 20%;
        left: 60%;
        z-index: 2;
    }
    .carousel .img5{
        width: 0px;
        height: 0px;
        top: 30%;
        left: 110%;
        z-index: 1;
    }

“`