JSP 类似于腾讯qq空间照片 点小图在上面出现大图

现在点左点右小图都能到下一张，大图只能显示第一张，我的js好像有点问题，但是不知道哪错了，那位大神看一下！！！
<%@ page language="java"
import="com.teletek.soo8web.common.util.CommonConstant"
pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<link rel="stylesheet" type="text/css"
href="<%=path%>/css/css.css">
<SCRIPT type=text/javascript src="<%=path%>/js/jquery-1.4.min.js"></SCRIPT>
</head><body>
     
     
     <s:if test="sharedList != null && !sharedList.isEmpty()">
<div id="wrapper"> <!--滚动看图-->
<div id="picSlideWrap" class="clearfix">
        <div class="imgnav" id="imgnav">     
             <div id="img">              
             <img width="480" height="851"
name="<s:property value='sharedList[0].pictureSmallPath'/>"
alt="分享图片：<s:property value='sharedList[0].pictureName'/>&nbsp;&nbsp;分享时间：<s:property value="sharedList[0].pictureDate"/>"
title="<s:property value='sharedList[0].pictureName'/>"
src="<s:property value='sharedList[0].picturePath'/>" />
                <div id="front" title="上一张"><a href="javaScript:void(0)" class="pngFix"></a></div>
                <div id="next" title="下一张"><a href="javaScript:void(0)" class="pngFix"></a></div>
             </div>
             
             <div id="content">   　
             <p><s:property value='sharedList[0].pictureName'/></p>　         
             </div>
          
             <div id="cbtn">
                <i class="picSildeLeft"><img src="<%=path%>/images/picSlideLeft.gif"/></i> 
                <i class="picSildeRight"><img src="<%=path%>/images/picSlideRight.gif"/></i> 
                <div id="cSlideUl">
                    <ul>
                    
                    <s:iterator value="sharedList" var="share" status="sha">
<li <s:if test="#sha.index == 0"></s:if>>
<img id="<s:property value='#share.pictureId'/>" name="<s:property value='#share.pictureSmallPath'/>"
alt="分享图片：<s:property value='#share.pictureName'/>&nbsp;&nbsp;分享时间：<s:property value="#share.pictureDate"/>"
title="<s:property value='#share.pictureName'/>"
src="<s:property value='#share.pictureSmallPath'/>" />
<tt></tt>
<span style="display:none;" id="<s:property value='#share.pictureId'/>">
<s:property value="#share.pictureLongitude" />,<s:property value="#share.pictureLatitude" />
</span>

</li>

</s:iterator>
                    
                    </ul>
                </div>
             </div>         
            
        </div>
    
    </div><!--end滚动看图-->
    
</div>
  </s:if>
<s:else>
<div class="tip2">
<p>暂时没有分享信息</p>
</div>
</s:else>
</div><script>
$(document).ready(function(){                          
    var index=0;
    //var length=$("#img img").length;
    var length=$("#cSlideUl img").length;
    var i=1;
    var cont = $(this).attr("title");
   // $("#content").html(cont);
    alert(length);
    //关键函数：通过控制i ，来显示图片
    function showImg(i){
        $("#img img")
            .eq(i).stop(true,true).fadeIn(800)
            .siblings("img").hide();
         $("#cbtn li")
            .eq(i).addClass("hov")
            .siblings().removeClass("hov");
            
    }
    
    function slideNext(){
        if(index >= 0 && index < length-1) {
             ++index;
             showImg(index);
        }else{
        if(length > 5){
        if(confirm("已经是最后一张,点击确定重新浏览！")){
showImg(0);
index=0;
aniPx=(length-5)*142+'px'; //所有图片数 - 可见图片数 * 每张的距离 = 最后一张滚动到第一张的距离
$("#cSlideUl ul").animate({ "left": "+="+aniPx },200);
i=1;
}
        }else{
return false;
}
            return false;
        }
        if(i<0 || i>length-5) {return false;}   
               $("#cSlideUl ul").animate({ "left": "-=142px" },200)
               i++;
    }
     
    function slideFront(){
       if(index >= 1 ) {
             --index;
             showImg(index);
        }
        if(i<2 || i>length+5) {return false;}
               $("#cSlideUl ul").animate({ "left": "+=142px" },200)
               i--;
    }
        $("#img img").eq(0).show();
        $("#cbtn li").eq(0).addClass("hov");
        $("#cbtn tt").each(function(e){
            var str=(e+1)+"/"+length;
            $(this).html(str)
        })
    
        $(".picSildeRight,#next").click(function(){
               slideNext();
           })
        $(".picSildeLeft,#front").click(function(){
               slideFront();
           })
        $("#cbtn li").click(function(){
            index  =  $("#cbtn li").index(this);
            showImg(index);
        });
$("#next,#front").hover(function(){
$(this).children("a").fadeIn();
},function(){
$(this).children("a").fadeOut();
})
    })
</script>
</div>
       
</body>
</html>

解决方案 »

  1.   


    就是要实现这种效果 下面是CSS样式
    @charset "GBK";
    body{font-size:12px;font-family:"宋体",Arial,sans-serif;}
    html,body,div,span,p,h1,h2,h3,h4,h5,h6,em,img,strong,sub,sup,tt,dd,dl,dt,form,label,table,caption,tbody, tfoot, thead,tr,th,td,ul,li,p,a{ margin:0;padding:0;}
    .cbody988{ margin:0 auto;width:988px; position:relative;}
    .cbody937{ margin:0 auto;width:937px; position:relative; padding-left:7px;}
    input,select,textarea,img{vertical-align:middle;}
    img{ border:0;}
    ul,li{list-style-type:none;}
    a:link,a:visited{text-decoration:none; color:#343434;}
    a:hover{text-decoration:underline; color:#0F6BD0;}
    .overhide{overflow:hidden;text-indent:-100em;}
    /*位置属性*/
    .marTop10{margin-top:10px;}
    .left{ float:left;}
    .right{ float:right;}
    .clear {clear: both;}
    .clearfix:after {clear: both;content: '';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}
    .clearfix {display: +inline-block;}/*header*/
    #header{ border-bottom:1px solid #383838; height:46px; position:relative;  line-height:46px;color:#FFFFFF; }
    #header h1{font-size:12px; font-weight:normal; background:url(news.png) no-repeat 50px center; padding-left:163px;}
    #header span{ position:absolute; right:10px; top:0px;color:#9A9A9A;font-size:12px; font-weight:normal; }
    #header span a{ color:#9A9A9A; margin:0 3px;}/*wrapper*/
    #wrapper{ width:960px;  margin:0 auto;}
    #picSlideWrap{ background:#F5F8FD; border:1px solid #A9BFD6; padding-bottom:30px;}
    .titleh3{ height:70px; line-height:70px; text-align:center; background:url(../images/dot.gif) repeat-x left bottom; width:910px; margin:0 auto; font-size:26px; color:#000;}
    .titleh4{text-align:center; font-size:12px; color:#000; font-weight:normal; padding:10px 0 20px 0px;}.imgnav{ width:788px; margin:10px auto;}
    #content{margin:0px auto;  line-height:19px;}
    #content p{ text-indent:2em; color:#333;}.imgnav{  position:relative; margin:0 auto; width:788px;}
    #img{ z-index:10; width:788px; position:relative; text-align:center;}
    #img img{ height:570px; display:none; border:4px solid #000;}
    #front{ position:absolute; left:0px; top:0px; z-index:10; cursor:pointer;  width:394px; height:578px; background:url(../images/blank.gif); }
    #front a{  position:absolute; left:20px; top:224px;display:block; background:url(../images/imgSlideLeft.png) no-repeat; width:104px; height:104px; display:none;}
    #next{  position:absolute; right:0px; top:0px; z-index:10;cursor:pointer; width:394px; height:578px;  background:url(../images/blank.gif);}
    #next a{  position:absolute; right:20px; top:224px; display:block; background:url(../images/imgSlideRight.png) no-repeat; width:104px; height:104px; display:none;}#cbtn{background:#EAEBF0; position:relative; height:122px; border:1px solid #D6D9DC; margin-top:12px; }
    #cbtn ul{position:relative; width:10000px; height:122px;}
    #cbtn ul li{ float:left; padding:8px 3px 3px 3px; width:116px; height:86px; cursor:pointer; text-align:center; margin-right:20px; position:relative;}
    #cbtn ul li img{ width:116px; height:86px; display:block;}
    #cbtn ul li tt{ background:#000; color:#FFF; position:absolute; right:4px; bottom:4px; z-index:20; font-family:"宋体" ;font-size:12px; line-height:16px; padding:0 5px;}
    #cbtn li.hov{ background:url(../images/imgHoverBg.gif) no-repeat;}
    .ctrl div{ clear:both;}
    #cSlideUl{width:690px; height:116px;overflow:hidden; position:relative; top:10px; margin:0 auto;}
    .picSildeLeft{cursor:pointer; position:absolute; top:32px; left:10px; z-index:9;}
    .picSildeRight{cursor:pointer; position:absolute; top:32px; right:10px; z-index:9;}
      

  2.   

    用火狐或者chrome调试工具调试
      

  3.   

    showImg函数里缺少了替换上面照片的代码吧！只是修改了样式
      

  4.   


    大神，你说的很对，showImg函数里缺少了替换上面照片的代码吧！只是修改了样式  
    那替换上面照片的代码怎么写，跪求！！ 
      

  5.   

    那你可以在修改样式之前重新给大图片的img控件的src赋值啊
      

  6.   


    function showImg(i){
            $("#img img")
                .eq(i).stop(true,true).fadeIn(800)
                .siblings("img").hide();
             $("#cbtn li")
                .eq(i).addClass("hov")
                .siblings().removeClass("hov");
                
        }这句的问题，不知道怎么改