三张图片切换的效果
效果就是这个链接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>