Javascript Jquery滑块工作不正常_Javascript_Jquery_Slider

Javascript Jquery滑块工作不正常

javascript jquery

Javascript Jquery滑块工作不正常,javascript,jquery,slider,Javascript,Jquery,Slider,嗨，我现在正在使用自定义滑块，当单击“下一步”按钮时，该滑块会放大中心图片，当单击“上一步”按钮时，会将其放回相同大小。我想制作一张类似IOS音乐专辑库的幻灯片。我的幻灯片的问题是，单击几下后，它并没有放大或缩小图片大小，而只是通过缩小左右图片来放大中心图片。这是我的代码，如果你能帮我解决这个问题。您可以在这里测试jsfiddle.net/jdDYQ/4 HTML: <ul class="mf1_ui" style="width: 3355.582507916454px; left: -1

嗨，我现在正在使用自定义滑块，当单击“下一步”按钮时，该滑块会放大中心图片，当单击“上一步”按钮时，会将其放回相同大小。我想制作一张类似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>

宽度：3355.582507916454px；左：-1770.83984375px；“>

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);
    }
},

“[class*=“next”]单击：函数（el，ev）{
var cName=el.attr（'class'）.substr（5）；
var slided=cName.substring（0，cName.lastIndexOf（“”）；
//var bigWidth=$（“+slideId+”）.width（）+28；
//console.log（bigWidth）；
如果（-（parseInt（$（“+slideId+”）.css（“左”），10））<（parseInt（$（“+slideId+”）.css（“宽”），10）-288））{
$（'.+slideId+'.'+'ui'）。设置动画({
左：“-=200px”
}, {
持续时间：1000，
队列：false，
步骤：函数（现在，fx）{
},
放松：'轻松外四'
});
$（'.+slideId++'.'+'ui-li-img:eq（+（this.options.index）+'））.animate({
宽度：（$（“+slideId+”）.width（）+20）+“px”，
高度：“88px”
}, {
持续时间：1000，
步骤：函数（现在，fx）{
},
放松：'轻松外四'
});
这个.options.index++；
log（this.options.index）；
}
},
“[class*=”上一个“]单击”：函数（el，ev）{
var cName=el.attr（'class'）.substr（9）；
var slided=cName.substring（0，cName.lastIndexOf（“”）；
console.log（slideId）；
if（parseInt（$（“+slideId+”）.css（“左”），10）嗨，好的，我要在这个网站上重新创建它嗨，我已经在jsfiddle.net=>上创建了我的滑块现在我的问题是我只想放大中心图片，你可以看到我已经注释掉了这样做的函数，但它破坏了我的滑块，就像IOs相册库一样。有什么想法吗？谢谢没有解决方案？问题如此我想没有人能为他们做太难的事，所以我很高兴。