原理是
點(diǎn)擊時把每一個位置的css類設(shè)為不同值
為每張圖片設(shè)置ID遥金，并把它們放進(jìn)數(shù)組仍侥，在點(diǎn)擊時循環(huán)為數(shù)組中的ID改變css類
分為向左和向右兩種情況，每種情況分別為第一張和最后一張臨界情況討論

直接放代碼
html部分（不知為何代碼放進(jìn)去變樣了，中間是img標(biāo)簽的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);
}

初學(xué)识腿，做的比較粗糙。
敬請?jiān)u論指導(dǎo)造壮。