您好我现在正在使用自定义滑块，在单击下一个按钮时放大中央图片，并在单击上一个按钮时放回相同的尺寸。要看我试图制作像IOS音乐专辑库那样的幻灯片。我的幻灯片的问题在于，点击几下后不会放大或缩小图片大小，只能通过缩小左右图片来放大中央图片。这是我的代码，如果你可以帮我解决这个问题。你可以在这里测试一下jsfiddle.net/jdDYQ/4
HTML：
<ul class="mf1_ui" style="width: 3355.582507916454px; left: -1770.83984375px;">
<li>
<img src="http://farm6.staticflickr.com/5333/9509968984_39f271e72e_m.jpg" alt="" class="mf1_f30_li" style="height: 88px;">
</li>
<li>
<img src="http://farm8.staticflickr.com/7320/9507172741_b869095bb1_m.jpg" alt="" class="mf1_f29_li" style="height: 88px;">
</li>
<li>
<img src="http://farm6.staticflickr.com/5328/9507168757_22b6b7fc4c_m.jpg" alt="" class="mf1_f28_li" style="height: 88px; display: inline-block; width: 146px;">
</li>
<li>
<img src="http://farm3.staticflickr.com/2830/9509968588_b11cc4d925_m.jpg" alt="" class="mf1_f27_li" style="height: 88px; display: inline-block; width: 146px;">
</li>
<li>
<img src="http://farm4.staticflickr.com/3758/9509964156_684f190b8a_m.jpg" alt="" class="mf1_f25_li" style="height: 88px; display: inline-block; width: 146px;">
</li>
<li>
<img src="http://farm8.staticflickr.com/7433/9509965790_b6103e5431_m.jpg" alt="" class="mf1_f24_li" style="height: 88px; display: inline-block; width: 146px;">
</li>
<li>
<img src="http://farm4.staticflickr.com/3778/9509963902_af7174270c_m.jpg" alt="" class="mf1_f22_li" style="height: 88px; display: inline-block; width: 146px;">
</li>
<li>
<img src="http://farm3.staticflickr.com/2834/9507172221_0a9061158e_m.jpg" alt="" class="mf1_f18_li" style="height: 88px; display: inline-block; width: 146px;">
</li>
<li>
<img src="http://farm4.staticflickr.com/3687/9507172565_4c16634337_m.jpg" alt="" class="mf1_f23_li" style="height: 88px; display: inline-block; width: 146px;">
</li>
<li>
<img src="http://farm4.staticflickr.com/3814/9507167983_0b9f412f24_m.jpg" alt="" class="mf1_f21_li" style="height: 88px; display: inline-block; width: 146px;">
</li>
<li>
<img src="http://farm8.staticflickr.com/7367/9509967948_dedf14f137_m.jpg" alt="" class="mf1_f20_li" style="height: 88px; display: inline-block; width: 146px;">
</li>
<li>
<img src="http://farm4.staticflickr.com/3713/9509963520_97e8412f2f_m.jpg" alt="" class="mf1_f19_li" style="height: 88px; display: inline-block; width: 146px;">
</li>
<li>
<img src="http://farm3.staticflickr.com/2829/9509963108_88692d54aa_m.jpg" alt="" class="mf1_f17_li" style="height: 88px; display: inline-block; width: 146px;">
</li>
<li>
<img src="http://farm4.staticflickr.com/3727/9507171935_623a1cef78_m.jpg" alt="" class="mf1_f16_li" style="height: 88px; display: inline-block; width: 106px;">
</li>
<li>
<img src="http://farm6.staticflickr.com/5517/9509967638_2a437768ff_m.jpg" alt="" class="mf1_f15_li" style="height: 88px; display: inline-block; width: 106px;">
</li>
<li>
<img src="http://farm8.staticflickr.com/7319/9509962870_4448372911_m.jpg" alt="" class="mf1_f14_li" style="height: 88px; display: inline-block; width: 106px;">
</li>
<li>
<img src="http://farm4.staticflickr.com/3685/9507167175_f9e5c96464_m.jpg" alt="" class="mf1_f13_li" style="height: 88px; display: inline-block; width: 106px;">
</li>
<li>
<img src="http://farm3.staticflickr.com/2890/9507171303_c02425f931_m.jpg" alt="" class="mf1_f12_li" style="height: 88px; display: inline-block; width: 106px;">
</li>
<li>
<img src="http://farm6.staticflickr.com/5452/9509967070_dbd6860dfd_m.jpg" alt="" class="mf1_f11_li" style="height: 88px; display: inline-block; width: 106px;">
</li>
<li>
<img src="http://farm3.staticflickr.com/2859/9509962588_5161ca44cf_m.jpg" alt="" class="mf1_f10_li" style="height: 88px;">
</li>
<li>
<img src="http://farm4.staticflickr.com/3823/9509962656_c09647f4d9_m.jpg" alt="" class="mf1_f9_li" style="height: 88px;">
</li>
<li>
<img src="http://farm3.staticflickr.com/2883/9509962418_8439045748_m.jpg" alt="" class="mf1_f8_li" style="height: 88px;">
</li>
<li>
<img src="http://farm3.staticflickr.com/2850/9507166999_d48c875c07_m.jpg" alt="" class="mf1_f7_li" style="height: 88px;">
</li>
<li>
<img src="http://farm3.staticflickr.com/2875/9507170425_0f1de921c1_m.jpg" alt="" class="mf1_f6_li" style="height: 88px;">
</li>
<li>
<img src="http://farm3.staticflickr.com/2885/9509965594_7a93eef0fc_m.jpg" alt="" class="mf1_f5_li" style="height: 88px;">
</li>
<li>
<img src="http://farm4.staticflickr.com/3727/9509965018_b07c0afedf_m.jpg" alt="" class="mf1_f4_li" style="height: 88px;">
</li>
<li>
<img src="http://farm6.staticflickr.com/5501/9507168951_b375e733f5_m.jpg" alt="" class="mf1_f3_li" style="height: 88px;">
</li>
<li>
<img src="http://farm8.staticflickr.com/7369/9509962244_978bbbc34e_m.jpg" alt="" class="mf1_f2_li" style="height: 88px;">
</li>
<li>
<img src="http://farm3.staticflickr.com/2853/9507166807_44ba87d059_m.jpg" alt="" class="mf1_f1_li" style="height: 88px;">
</li>
</ul>
JavaScript / jQuery：
'[class*="next"] click': function (el, ev) {
var cName = el.attr('class').substr(5);
var slideId = cName.substring(0, cName.lastIndexOf("_"));
//var bigWidth = $("."+slideId+"_ui li img").width() + 28;
//console.log(bigWidth);
if (-(parseInt($("." + slideId + "_ui").css("left"), 10)) < (parseInt($("." + slideId + "_ui").css("width"), 10) - 288)) {
$('.' + slideId + '_' + 'ui').animate({
left: "-=200px"
}, {
duration: 1000,
queue: false,
step: function (now, fx) {
},
easing: 'easeInOutQuad'
});
$('.' + slideId + '_' + 'ui li img:eq(' + (this.options.index) + ')').animate({
width: ($("." + slideId + "_ui li img").width() + 20) + "px",
height: "88px"
}, {
duration: 1000,
step: function (now, fx) {
},
easing: 'easeInOutQuad'
});
this.options.index++;
console.log(this.options.index);
}
},
'[class*="previous"] click': function (el, ev) {
var cName = el.attr('class').substr(9);
var slideId = cName.substring(0, cName.lastIndexOf("_"));
console.log(slideId);
if (parseInt($("." + slideId + "_ui").css("left"), 10) <= 0) {
$('.' + slideId + '_' + 'ui').animate({
left: "+=200px"
}, {
duration: 1000,
queue: false,
step: function (now, fx) {
//$("."+slideId+"_ui:gt(0)").css( "left", now );
//$("."+slideId+"_ui li img").width();
//console.log(now);
},
easing: 'easeInOutQuad'
});
$('.' + slideId + '_' + 'ui li img:eq(' + (this.options.index) + ')').animate({
width: ($("." + slideId + "_ui li img").width() - 20) + "px",
height: "88px"
}, {
duration: 1000,
step: function (now, fx) {
},
easing: 'easeInOutQuad'
});
this.options.index--;
console.log(this.options.index);
}
},