jquery - 使用 eq() 获取图像的图像滑块尝试将其更改为图像变量

Question

我正在尝试使用此图像滑块从文件夹位置获取图像，而不是使用 .eq() 来获取图像，但我无法弄清楚如何去做。

var pages = $('#container li'),
    current = 0;
var currentPage, nextPage;
var get_images = new Array("1.jpg", "2.jpg");
var handler = function () {
    $('#container .button').unbind('click');
    currentPage = pages.eq(current);
    if ($(this).hasClass('prevButton')) {
        if (current <= 0) current = pages.length - 1;
        else current = current - 1;
        nextPage = pages.eq(current);

        nextPage.css("marginLeft", -604);
        nextPage.show();
        nextPage.animate({
            marginLeft: 0
        }, 800, function () {
            currentPage.hide();
        });
        currentPage.animate({
            marginLeft: 604
        }, 800, function () {
            $('#container .button').bind('click', handler);
        });
    } else {

        if (current >= pages.length - 1) current = 0;
        else current = current + 1;
        nextPage = pages.eq(current);

        nextPage.css("marginLeft", 604);
        nextPage.show();
        nextPage.animate({
            marginLeft: 0
        }, 800, function () {});
        currentPage.animate({
            marginLeft: -604
        }, 800, function () {
            currentPage.hide();
            $('#container .button').bind('click', handler);
        });
    }
}

$('#container .button').click(handler);

Answer 1

这将比仅仅替换 的实例更困难.eq()，因为它正在使用我们可以使用.css()和.animate()反对的 DOM 元素，因为它们已经在 DOM 中。

我认为最好只是这样做

$.each(get_images, function(i,img){
    $('#container').append('<li><img src="'+img+'"/></li>');
});

然后调用所有其他代码。

编辑

这是一个 jsFiddle，我对您的代码进行了改编

我只是简单地使用了 bootstrap 和一个随机缩略图生成器，在代码中不要注意它。关注get_images变量和$.each()函数