2010-02-26 4 views
1

매우 흥미로운 jQuery Cycle 플러그인을 발견했습니다.JQuery와 JQuery 사이클 및 JSON

그래서 이미지를 반환해야 다음 스크립트가 :

$(function() { 
// retrieve list of slides from server 
$.getJSON('slidelist.php', startSlideshow); 

function startSlideshow(slides) { 
    /* server returns an array of slides which looks like this: 
    [ 
     'images/beach2.jpg', 
     'images/beach3.jpg', 
     'images/beach4.jpg', 
     'images/beach5.jpg', 
     'images/beach6.jpg', 
     'images/beach7.jpg', 
     'images/beach8.jpg' 
    ] 
    */ 

    var totalSlideCount = 1 + slides.length; 

    var $slideshow = $('#slideshow'); 

    // markup contains only a single slide; before starting the slideshow we 
    // append one slide and prepend one slide (to account for prev/next behavior) 
    $slideshow.prepend('<img src="'+slides.pop()+'" />'); 
    $slideshow.append('<img src="'+slides.shift()+'" />'); 

    // start slideshow 
    $('#slideshow').cycle({ 
     fx: 'scrollHorz', 
     startingSlide: 1, // start on the slide that was in the markup 
     timeout: 0, 
     speed: 500, 
     prev: '#prev', 
     next: '#next', 
     before: onBefore 
    }); 


    function onBefore(curr, next, opts, fwd) { 
     // on Before arguments: 
     // curr == DOM element for the slide that is currently being displayed 
     // next == DOM element for the slide that is about to be displayed 
     // opts == slideshow options 
     // fwd == true if cycling forward, false if cycling backward 

     // on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet) 
     if (!opts.addSlide) 
      return; 

     // have we added all our slides? 
     if (opts.slideCount == totalSlideCount) 
      return; 

     // shift or pop from our slide array 
     var nextSlideSrc = fwd ? slides.shift() : slides.pop(); 

     // add our next slide 
     opts.addSlide('<img src="'+nextSlideSrc+'" />', fwd == false); 
    }; 
}; 

은});

그러나, 나는 아약스에 정말 나쁜거야, 당신은 내가이

$.getJSON('slidelist.php', startSlideshow); 

내가 논문 이미지 URL을받을 수있는 방법을 이미지를 반환하는 데 사용할 수있는 방법을 말해 줄래?

대단히 감사합니다. 에 대해 감사드립니다.

답변

1

음 .. 전혀 AJAX에 대한 아닌가요 :

것은 당신이 기능 startSlideshow의 내부 객체를받을 수 있습니다 :

slides = [ 
    'images/beach2.jpg', 
    'images/beach3.jpg', 
    'images/beach4.jpg', 
    'images/beach5.jpg', 
    'images/beach6.jpg', 
    'images/beach7.jpg', 
    'images/beach8.jpg' 
]; 

는 이제 기본 for으로이 객체를 반복 할 수 루프 :

for(var i=0, len = slides.length; i<len;i++){ 
     console.log(slides[i]) 
} 

지금 당장은 각 단계마다 이미지 URL이 있습니다 (slides[i]). $('#slideshow')에 추가하여 재생을 시작할 수 있습니다.