jqery图片展示效果

好久没更新了，加一个jqery图片展示效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<SCRIPT src="jquery.min.js" type=text/javascript></SCRIPT>
<style type="text/css">
#photoShow{
    border: solid 1px #C5E88E;
    overflow: hidden; /**//*图片超出DIV的部分不显示*/
    700px;
    height: 256px;
    background: #C5E88E;
    position: relative;
}
.photo{
    position: absolute;
    top: 0px;
    632px;
    height: 256px;
}

.photo img{
    632px;
    height: 256px;
}
.photo span{
    padding: 5px 0px 0px 5px;
    632px;
    height: 110px;
    position: absolute;
    left: 0px;
    bottom: -32px; /**//*介绍内容开始的时候不显示*/
    background: black;
    filter: alpha(opacity=50); /**//*IE透明*/
    opacity: 0.5; /**//*FF透明*/
    color: #FFFFFF;
}
.jqtitle{height:200px; left:0; 20px; overflow:hidden; position:absolute; top:0px; background-color:#9933CC; z-index:6;}
.jqcontent{left:0; overflow:hidden; position:absolute; top:-50px; background-color:#9933CC; z-index:6;}
</style>
</head>

<body>
<div id="photoShow">
    <div class="photo one">
        <img src="p1.jpg" />
  <div class="jqtitle">1操盘风向标</div>
        <div class="jqcontent">
   1操盘风向标


  </div>

    </div>
    <div class="photo">
        <img src="p2.jpg" />
       <div class="jqtitle">破解庄家</div>
        <div class="jqcontent">
   <a href="#">操盘风向标</a>


  </div>
    </div>
    <div class="photo">
        <img src="p3.jpg" />
        <div class="jqtitle">操盘风向标</div>
        <div class="jqcontent">
   <a href="#">操盘风向标</a>


  </div>
    </div>
    <div class="photo">
        <img src="p4.jpg" />
        <div class="jqtitle">操盘风向标</div>
        <div class="jqcontent">
   <a href="#">操盘风向标</a>


  </div>
    </div>
    <div class="photo">
        <img src="p5.jpg" />
        <div class="jqtitle">操盘风向标</div>
        <div class="jqcontent">
   <a href="#">操盘风向标</a>


  </div>
    </div>

</div>
<script type="text/javascript">
$(document).ready(function(){
var imgDivs = $("#photoShow>div");
var imgNums = imgDivs.length; //图片数量
var divWidth = parseInt($("#photoShow").css("width")); //显示宽度
var imgWidth = parseInt($(".photo>img").css("width")); //图片宽度
var minWidth = 20; //显示其中一张图片时其他图片的显示宽度
var spanHeight = parseInt($("#photoShow>.photo:first>.jqcontent").css("height")); //获取图片介绍信息的高度

imgDivs.each(function(i){
  $(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums)});
  $(imgDivs[i]).hover(function(){
   //$(this).find("img").css("opacity","1");
   $(this).find("span").stop().animate({bottom: 0}, "slow");
   imgDivs.each(function(j){
    if(j<=i){
     $(imgDivs[j]).stop().animate({left: j*minWidth}, "slow");
    }else{
     $(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow");
    }
   });
  },function(){
   imgDivs.each(function(k){
    //$(this).find("img").css("opacity","0.7");



   });
  });
});

$(imgDivs[0]).css({"z-index": 0, "left": 0});
$(imgDivs[1]).css({"z-index": 1, "left": 622});
$(imgDivs[2]).css({"z-index": 2, "left": 642});
$(imgDivs[3]).css({"z-index": 3, "left": 662});
$(imgDivs[4]).css({"z-index": 4, "left": 682});

});
</script>
</body>
</html>
未完