我目前正在使用 jquery 库使用 javascript 编写轮播。基本上，显示了三个图像，中央图像比其他两个图像大。在向左或向右移动时，中心图像的大小从 115px*115px 调整为 50px*50px，并根据用户输入向左或向右移动。
问题是，当调整大小时，中心图像会逐渐被裁剪，直到达到 50px*50px，然后恢复到更正常的状态： http://www.filedropper.com/imggetscropped
Javascript如下：
$("div#carousel .item:eq(2)").animate({'width':'50px', 'height':'50px', 'opacity':'0.5'}, {queue:false, duration:900});
$("div#carousel .item:eq(2) img").animate({'width':'50px', 'height':'50px', 'marginTop': '30px'}, {queue:false, duration:900});
$("div#carousel .item:eq(1)").animate({'width':'115px', 'height':'115px', 'opacity':'1'}, {queue:false, duration:900});
$("div#carousel .item:eq(1) img").animate({'width':'115px', 'height':'115px', 'marginTop': '0px'}, {queue:false, duration:900});
$("div#carousel .item:not(eq(2))").animate({'left':'+=56px'}, {queue:false, duration:900});
$("div#carousel .item:eq(2)").animate({'left':'+=122px'}, {queue:false, duration:900, complete: carousel.toggleInput});
使用的图像是具有透明度的 png。