阵列中的背景图像褪色

Question

$('.pictures a').click(function () {
    var path = "place/of/images";
    var pics = ['pic1.JPG',
                'pic2.JPG',
                'pic3.JPG',
                'pic4.JPG'];
    var i = 0;
    var numberOfPics = pics.length - 1;
    var vaheta = setInterval(function () {
        $('body').css({ backgroundImage: 'url(' + path + pics[i] + ')' });
        if (i == numberOfPics) {
            i = 0;
        } else {
            i++;
        }
    }, 3000);
    return false;
});

这是当前为我更改背景图像的代码。 现在，我在这里找到了一个主题，它说您必须等加载图片，并且有一个小提琴http://jsfiddle.net/RnqQL/1/ ，这正是我想要做的，但是我不太了解如何将这两个（我的代码和小提琴）结合起来。

这些图像实际上将稍后从服务器上以JSON加载，具体取决于用户单击以获取此幻灯片的链接的ID，这对我来说实在是太压倒性的...

Answer 1

我在http://jsfiddle.net/xMrp3/1/创建了小提琴

您可以修改和使用。 我试图解释我的评论。

$('.pictures a').click(function () {
    var path = "http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/";

    $("#wrap").empty(); // clear wrap div content
    $.getJSON('/echo/json/', function (pics) { // get json data
        var pics = ['s-1.jpg', 's-5.jpg', 's-3.jpg']; // i override json response for demo

        $.each(pics, function(i, pic) { // loop through pics array
            $('<img/>').attr('src', path + pic).appendTo($("#wrap")); // append all images to #wrap div
        });

        if (animTimeout == null) // if we didnt started anim yet
            anim(); // start animation
    });
    return false;
});

var animTimeout = null;
function anim() {
    $("#wrap img").first().appendTo('#wrap').fadeOut(500);
    $("#wrap img").first().fadeIn(500);    
    animTimeout = setTimeout(anim, 700);
}