JQuery的周期和JSON与jQuery周期、JQuery、jQuery、JSON

2023-09-11 01:15:12 作者:走自己的路让别人无路可走

我发现jQuery的周期插件,这是非常有意思的。

I found the jQuery Cycle plugin which is very interesting.

于是,就有了下面的脚本应该返回图像:

So, there is the following script that should return the images:

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

});

不过,因为我真的很糟糕阿贾克斯,你能告诉我怎么用这个

But, as I'm really bad in ajax, Can you tell me how can I use this

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

回到我怎么能收到论文图片的URL的图像?

to return the images how can I receive theses images url?

非常感谢你, 问候。

推荐答案

嗯..是不是AJAX在所有:)

Well.. Is not about AJAX at all :)

的事情是,您会收到一个对象的功能, startSlideshow 里面的:

The thing is that you receive an object inside of the function startSlideshow:

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

现在,你可以遍历这个对象与基本循环:

Now you can iterate this object with a basic for loop:

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

现在,你对每一步的图片网址:幻灯片[I] 。您可以附加到 $('#幻灯片'),并开始玩弄。

Right now, you have an image url on each step: slides[i]. You can append to $('#slideshow') and start playing around.