原理是
点击时把每一个位置的css类设为不同值
为每张图片设置ID，并把它们放进数组，在点击时循环为数组中的ID改变css类
分为向左和向右两种情况，每种情况分别为第一张和最后一张临界情况讨论

直接放代码
html部分（不知为何代码放进去变样了，中间是img标签的src）

<div class="container">
        <ul>
            <li class="img img1">![](images/1.jpg)</li>
            <li class="img img2">![](images/2.jpg)</li>
            <li class="img img3">![](images/3.jpg)</li>
            <li class="img img4">![](images/4.jpg)</li>
            <li class="img img5">![](images/5.jpg)</li>
            
            <button class="btnl"><</button>
            <button class="btnr">></button>
        </ul>   
    </div>  

css

<style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
    .container{
        width: 800px;
        height: 400px;
        margin: auto;
        }
    ul{
        width: 800px;
        height: 300px;
        border: 2px solid red;
        overflow: hidden;
        position: absolute;
        background: url(images/timg.jpg);
    }
    img{
        width: 100%;
        height: 100%;
        
    }
    li{
      list-style-type:none;
      transition: width 0.5s,height 0.5s,top 0.5s,left 0.5s;
    }
    li.img1{
        position: absolute;
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%;
        z-index: 1; 
    }
    li.img2{
        position: absolute;
        width: 200px;
        height: 100px;
        top: 30%;
        left: 20px;
        z-index: 2;
    }
    li.img3{
        position: absolute;
        width: 500px;
        height: 250px;
        top: 10%;
        left: 150px;
        z-index: 3;
    }
    li.img4{
        position: absolute;
        width: 200px;
        height: 100px;
        top: 30%;
        left: 580px;
        z-index: 2;
    }
    li.img5{
        position: absolute;
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%;
        z-index: 1;
    }   
    .btnl{
        width: 20px;
        height: 40px;
        display: block;
        position: absolute;
        left: 0px;
        top: 40%;
        opacity:0.8;
    }
    .btnr{
        width: 20px;
        height: 40px;
        display: block;
        position: absolute;
        right: 0px;
        top: 40%;
        opacity:0.8;
    }
    </style>    

javascript部分

window.onload = function(){
imgNum = $('.img').size();
    for(var i=0;i<imgNum;i++){
        $('.img:eq('+i+')').attr('imgId',i);
    }
    function right(){
        var fy = [];
        for(var i=0;i<imgNum;i++){
            fy[i] = $('.img[imgId='+i+']').attr('class');
        }
        for(var i=0;i<imgNum;i++){
            if(i==imgNum-1){
                $('.img[imgId='+i+']').attr('class',fy[0]);
            }else{
                $('.img[imgId='+i+']').attr('class',fy[i+1]);
            }
        }   
    };
function left(){
        var fy = [];
        for(var i=0;i<imgNum;i++){
            fy[i] = $('.img[imgId='+i+']').attr('class');
        }
        for(var i=0;i<imgNum;i++){
            if(i==0){
                $('.img[imgId='+i+']').attr('class',fy[imgNum-1]);
            }else{
                $('.img[imgId='+i+']').attr('class',fy[i-1]);
            }
        }   
    };
    
    $('.btnr')[0].addEventListener('click',right);  
    $('.btnl')[0].addEventListener('click',left);
}

初学，做的比较粗糙。
敬请评论指导。