JQuery百叶窗效果

View Code
<!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=utf-8" />
<title>Crow_百叶窗</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
     var all_Div;
     var bai_current = 1;
     var all_length;
     var bai_erWidth=0;
$(document).ready(function(){
                           bai_init();
                           });
function bai_init(){
     all_Div = $(".bai_main_div div");
     all_length=all_Div.length;
     for(var i =0 ; i<all_length;i++){
         imgs = $("."+all_Div[i].className+" img");
         bai_erWidth=imgs[1].width;
          $("."+all_Div[i].className).css("width",imgs[0].width+imgs[1].width+"px");
         $("."+all_Div[i].className).css("right",(all_length-1-i)*bai_erWidth+"px");
         $("."+all_Div[i].className).css("z-index",(all_length-1-i)*bai_erWidth);
     }
}
function bai_onclick(id){
        id = id.substr(id.lastIndexOf("_")+1);
        if(id>bai_current){
            for(var i=bai_current;i<id;i++){
                $("."+all_Div[i-1].className).animate({right:1000-bai_erWidth*(i)+"px"});
                }
                bai_current=id;
        }else{
            for(var i=bai_current;i>id;i--){
                $("."+all_Div[i-2].className).animate({right:bai_erWidth*(all_length-(i-1))+"px"});
                }
                bai_current=id;
        }
        
    }


</script>
<style type="text/css">
    .bai_main_div{
        margin:0 auto;
        background:#000;
        width:1000px;
        position:relative;
        height:526px;
        overflow:hidden;
    }
    
    .bai_main_div div{
        position:absolute;
    }
    .bai_main_div div img{
        cursor:pointer;
        }
        .bai_btn{
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
filter:Alpha(Opacity="75",FinishOpacity="0",Style="2") 
        }
</style>
</head>

<body>
<div class="bai_main_div">
    <div class="bai_main_div_1"><img src="suoai.jpg" width="1000" height="525" /><img class="bai_btn" src="suoai_title.jpg" onclick="bai_onclick(this.parentNode.className)" width="60" height="525"  /></div>
    <div class="bai_main_div_2"><img src="suoai.jpg" width="1000" height="525"/><img class="bai_btn" src="suoai_title.jpg" onclick="bai_onclick(this.parentNode.className)" width="60" height="525"/></div>
    <div class="bai_main_div_3"><img src="suoai.jpg" width="1000" height="525"/><img class="bai_btn" src="suoai_title.jpg" onclick="bai_onclick(this.parentNode.className)" width="60" height="525"/></div>
    <div class="bai_main_div_4"><img src="suoai.jpg" width="1000" height="525"/><img class="bai_btn" src="suoai_title.jpg" onclick="bai_onclick(this.parentNode.className)" width="60" height="525"/></div>
    <div class="bai_main_div_5"><img src="suoai.jpg" width="1000" height="525"/><img class="bai_btn" src="suoai_title.jpg" onclick="bai_onclick(this.parentNode.className)" width="60" height="525"/></div>
    <div class="bai_main_div_6"><img src="suoai.jpg"  width="1000" height="525"/><img class="bai_btn" src="suoai_title.jpg" onclick="bai_onclick(this.parentNode.className)" width="60" height="525"/></div>
    
</div>

</body>
</html>
写的完全是新手级别的，求高手指教