JQuery部分：

　　$(document).ready(function() {

       var slideShow=$("#slideShow");

    var ul=slideShow.find("ul");

    var li=ul.find("li");

    var cntLength=li.length; //获取里面li的数量，这样就可以得出img的数量

   

    UpdateImagePosition();

    //appendTo:把所有匹配的元素追加到指定元素的元素集合后面中

    $("#LeftButton").click(function(){

     slideShow.animate({

     width:490,

     height:490

   },"slow",function(){

    $("li:first").fadeOut("slow",function(){

    $("li:first").remove().appendTo(ul).show();

    UpdateImagePosition(); 

   });

    return false;

  });

   })

   //prependTo:把所有匹配的元素前置到另一个、指定的元素的元素集合中。

   $("#RightButton").click(function(){

    slideShow.animate({

     width:490,

   height:490

   },'slow',function(){

    $("li:last").fadeIn("slow",function(){

     $(this).hide().remove().prependTo(ul).show();

     UpdateImagePosition();

    })

    return false;

   });

   })

 function UpdateImagePosition(){

    li.css("z-index",function(i){

     return cntLength-1;

    })

 }

  })

CSS部分：

<style type="text/css">

 #slideShowContainer{

  width:510px;

  height:510px;

  position:relative;

  margin:120px auto 50px;

 }

 #slideShow{

  position:absolute;

  height:490px;

  width:490px;

  background-color:#fff;

  margin:10px 0px 0px 10px;

  z-index:100;

  

  /*box-shadow:CSS3，该样式是让边框有阴影*/

  -moz-box-shadow:0 0 10px #111;

  -webkit-box-shadow:0 0 10px #111;

  box-shadow:0 0 10px #111;

 }

 #slideShow ul{

  position:absolute;

  top:15px;

  bottom:15px;

  right:15px;

  left:15px;

  list-style:none;

  /*overflow有四个属性visible、hidden、scroll、auto。visible默认为不启用overflow属性

  hidden会将显示出边框的内容隐藏。scroll当设置的内容超过边框时，将会出现水平滚动条和垂直滚动条。

  auto属性当设置的内容超过边框时，会出现水平滚动条。总是加滚动条，水平滚动条*/

  overflow:hidden;/*根据div规定的高度和宽度，隐藏超过div设置的高度和宽度的信息。*/

 }

 #slideShow li{

  position:absolute;

  top:0;

  left:0;

  width:100%;

  height:100%;

 }

 #slideShowContainer > a{

  border:none;

  text-decoration:none;

  text-indent:-99999px;

  overflow:hidden;

  width:36px;

  height:37px;

  background:url(Img/arrows.png) no-repeat;

  position:absolute;

  top:50%;

  margin-top:-21px;

 }

 #LeftButton{

  left:-38px;

 }

 #LeftButton:hover{

  background-position:bottom left;

 }

 a#RightButton{

  right:-38px;

  background-position:top right;

 }

 #RightButton{

  background-position:bottom right;

 }

</style>

html部分：

<div id="slideShowContainer">

         <div id="slideShow">

             <ul>

                 <li><img src="Img/IMG_4740.jpg" width="100%" height="100%"/></li>

                    <li><img src="Img/IMG_4741.jpg" width="100%" height="100%"/></li>

                    <li><img src="Img/IMG_4742.jpg" width="100%" height="100%"/></li>

                    <li><img src="Img/IMG_4743.jpg" width="100%" height="100%"/></li>

                    <li><img src="Img/IMG_4744.jpg" width="100%" height="100%"/></li>

                    <li><img src="Img/IMG_4745.jpg" width="100%" height="100%"/></li>

                    <li><img src="Img/IMG_4746.jpg" width="100%" height="100%"/></li>

                    <li><img src="Img/IMG_4747.jpg" width="100%" height="100%"/></li>

                </ul>  

            </div>

            <a href="#" id="LeftButton"></a>

            <a href="#" id="RightButton"></a>

        </div>