从数组中淡入淡出背景图像

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

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

这些图像实际上稍后会根据该人单击以获取此幻灯片的链接的 ID 从服务器加载 JSON，这对我来说太压倒性了......

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

​