배열의 배경 이미지가 흐려짐

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/ 이걸 정확히하고 싶습니다. 그러나이 두 가지를 결합하는 방법을 잘 모릅니다. 내 코드와 바이올린).

이미지는 실제로 나중에 사람이 슬라이드 쇼를 얻기 위해 클릭 한 링크의 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); 
}