用JQ中的fadeOut和fadeIn方法，当点击上一张和下一张按钮时进行图片的切换～

用JQ中的fadeOut和fadeIn方法，当点击上一张和下一张按钮时进行图片的切换～

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({
     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({
     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{
  510px;
  height:510px;
  position:relative;
  margin:120px auto 50px;
 }
 #slideShow{
  position:absolute;
  height:490px;
  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;
  100%;
  height:100%;
 }
 #slideShowContainer > a{
  border:none;
  text-decoration:none;
  text-indent:-99999px;
  overflow:hidden;
  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>