三张图片切换的效果解决思路-JavaSript-爱易网页

三张图片切换的效果解决思路

日期：2014-05-16　浏览次数：21678 次

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

------解决方案--------------------
就想实现三张图片翻页？

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

三张图片切换的效果解决思路

相关资料更多>

推荐阅读更多>