0
$('.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,这对我来说太压倒了......

4

1 回答 1

0

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

​</p>

于 2012-12-13T16:17:32.700 回答