Jquery如何做这个类似CoverFlow的效果


效果如上图。
中间的图片 显示尺寸最大，两边依次相对减小，
点击“左、右按钮”图片都会移动一个图片的位置（循环显示），
移动到中间位置的图片始终显示最大尺寸，
移出后相应显示尺寸相应减少

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>test</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
        window.onload=(function(){
            $("img:gt(4)").hide();
            change();
            $("button:first").click(function(){
                $("img:visible:last").hide();
                $("img:hidden:last").insertBefore($("img:visible:first"));
                $("img:hidden:first").show();
                change();
            });
            $("button:last").click(function(){
                $("img:visible:first").hide();
                $("img:hidden:first").insertAfter($("img:hidden:last"));
                $("img:hidden:first").show();
                change();
            });
        });
        function change(){
            $("img:visible:eq(0)").css("width","16%");
            $("img:visible:eq(1)").css("width","21%");
            $("img:visible:eq(2)").css("width","26%");
            $("img:visible:eq(3)").css("width","21%");
            $("img:visible:eq(4)").css("width","16%");
        }
        </script>
        <style type="text/css">
            div {position:absolute;background:#EEE;width:200px;}
            span {width:84%;}
            img {width:20%;}
            button {width:8%;height:100%;}
        </style>
    </head>
    <body>
    <div><button><</button><span>
    <img src="#" alt=1></img><img src="#" alt=2></img><img src="#" alt=3></img><img src="#" alt=4></img><img src="#" alt=5></img><img src="#" alt=6></img><img src="#" alt=7></img><img src="#" alt=8></img>
    </span><button>></button></div>
    </body>
    </html>