三张图片切换的效果

效果就是这个链接http://guanjia.qq.com/user/index.html?ADUIN=362123731&ADSESSION=1315618891&ADTAG=CLIENT.QQ.3493_.0个人中心的三张图片效果。
我用jQuery 搞了半天，还是不行。
希望大家给我弄一下，只要点击中间的那张图片效果就可以了，点击第一张，最后一张我就自己写了。
你随便照三张大小一样的图片，然后根据我的代码修改一下，不然省得你写 麻烦。
我的代码是<title>无标题页</title>
    <style type="text/css">
        .v-img0
        {
            top: 200px;
            left: 400px;
            position: absolute;
            z-index:0;
        }
        .v-img1
        {
            position: absolute;
            top: 200px;
            left: 360px;
            z-index:1;
        }
        .v-img2
        {
            position: absolute;
            top: 200px;
            left: 320px;
            z-index:2;
        }
        .img{}
    </style>
</head>
<body>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
    $("#hide").bind("click",function(){
        $(".v-img").slideUp(2000);
    
    });
    
    $("#show").bind("click",function(){
        $(".v-img").animate({left:"400px",opacity:"0.5"},3000);
    });
    
    $(".v-img0,.v-img1,.v-img2").mousemove(function (){
        $(this).css("top","170px");
    });
    $(".v-img0,.v-img1,.v-img2").mouseout(function (){
        $(this).animate({top:"200px"},500);
    });
    $(".v-img0,.v-img1,.v-img2").click(function (){
        if( $(this).css("left")=="320px" ){//点第一张图片
        }
        if( $(this).css("left")=="360px" ){//点中间那张图片
           // $(this).css({left:"320px",zIndex:2});
            $("#img2").attr("id","imgx");
            $(this).attr("id","img2");
            $("#img0").attr("id","img1");
            $("#imgx").attr("id","img0");
            $("#img0").addClass("v-img0");
            $("#img1").addClass("v-img1");
            $(this).addClass("v-img2");
        }
        if( $(this).css("left")=="400px" ){//点最后一张图片
        }
    });
})
</script>
    <div>
    <img class="v-img0" id="img0" src="img/0.JPG" alt="" />
    <img class="v-img1" id="img1" src="img/1.JPG" alt="" />
    <img class="v-img2" id="img2" src="img/2.JPG" alt="" />
    </div>
</body>
</html>

解决方案 »

  1.   

    数量可以自己改变<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %><!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 id="Head1" runat="server">
        <title>无标题页</title>
        <script src="JS/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
        <script src="JS/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
          var num=0;
          var pause;
          function showImage()
          {
               num++;
               run();
             pause=setTimeout(showImage,"2000");
          }
          
          function run()
          {
            if(num>0 && num<=6)
              { 
                  for(var i=1;i<=6;i++)
                  {
                    if(i==num)
                    {
                        $("#div"+i+"").show();
                        $("#li"+i+"").css({"background-color":"#9ACD32","font-size":"15px","font-weight":"bold"});
                        if(i==6)
                        {
                            num=0;
                        }
                    }
                    else
                    {
                        $("#div"+i+"").hide();
                       $("#li"+i+"").css({"background-color":"#C0C0C0","font-size":"12px","font-weight":"bold"});
                    }
                  }
              }
          }
          
          $(document).ready(function(){
                    showImage();
                    $("li").hover(function(){
                        clearTimeout(pause);
                        var str=$(this).text();
                        num=str;
                        run();
                    },function(){
                        pause=setTimeout(showImage,"2000");
                    });
          });
        </script>
        <style type="text/css">
            li {
           text-align:center;
           font-size:12px;
           float:left;
           width:15px;
           height:10px;
           
           background-color:#C0C0C0;
           margin-left:5px;
            cursor:pointer;
         }   
        </style>
    </head>
    <body>
     <h1>JS轮播器</h1>
     <div>
           <div style="width:300px; height:300px; border:2px solid;">
            <%
                for (int i = 1; i < 7;i++ )
                {
            %>
                    <div id='div<%=i %>' style="width:300px; height:300px; position:absolute; display:none"><img src='<%=i %>.bmp'  style="width:300px; height:300px" alt="<%=i %>"/></div>
            <%            
                }
            %>
            <div style="width:169px; height:20px; position:absolute; left: 138px; top: 343px;">
                <ul>
                   <%
                    for (int j = 1; j < 7;j++ )
                    {
                    %>
                            <li id='li<%=j %>'><%=j %></li>
                    <%            
                        }
                    %>
                 </ul>
            </div>
            </div>
     </div>
    </body>
    </html>