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

从阵列中褪色的背景图像

1 个答案: