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/がありました。これはまさに私がやりたいことですが、私はこれら2つ（私のコードとフィドル）を組み合わせる方法がよくわかりません。

このスライドショーを取得するためにユーザーがクリックしたリンクのIDに応じて、画像は実際には後でサーバーからJSONで読み込まれますが、これは私には圧倒的すぎます...

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 に答える