三张图片切换的效果解决思路
日期：2014-05-16 浏览次数：21527 次
三张图片切换的效果
效果就是这个链接http://guanjia.qq.com/user/index.html?ADUIN=362123731&ADSESSION=1315618891&ADTAG=CLIENT.QQ.3493_.0个人中心的三张图片效果。
我用jQuery 搞了半天，还是不行。
希望大家给我弄一下，只要点击中间的那张图片效果就可以了，点击第一张，最后一张我就自己写了。
你随便照三张大小一样的图片，然后根据我的代码修改一下，不然省得你写 麻烦。
我的代码是
------解决方案--------------------
就想实现三张图片翻页？
效果就是这个链接http://guanjia.qq.com/user/index.html?ADUIN=362123731&ADSESSION=1315618891&ADTAG=CLIENT.QQ.3493_.0个人中心的三张图片效果。
我用jQuery 搞了半天，还是不行。
希望大家给我弄一下，只要点击中间的那张图片效果就可以了，点击第一张，最后一张我就自己写了。
你随便照三张大小一样的图片，然后根据我的代码修改一下，不然省得你写 麻烦。
我的代码是
- HTML code
<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>
------解决方案--------------------
就想实现三张图片翻页？
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
