Jquery如何做这个类似CoverFlow的效果效果如上图。中间的图片 显示尺寸最大，两边依次相对减小，点击“左、右按
Jquery如何做这个类似CoverFlow的效果
效果如上图。
中间的图片 显示尺寸最大，两边依次相对减小，
点击“左、右按钮”图片都会移动一个图片的位置（循环显示），
移动到中间位置的图片始终显示最大尺寸，
移出后相应显示尺寸相应减少
[解决办法]
- HTML code
<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>