带有json数据的图像滑块？

Question

我想建立一个图像滑块，显示与相关的标题和每个项目的细节图像。需要从JSON拉取数据。例如，我像这样存储图像。

items[
    {
        "image" : "images/item-1.png",
        "heading" : "heading-1",
        "text" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    },
    {
        "image" : "images/item-2.png",
        "heading" : "heading-2",
        "text" : "Morbi tincidunt commodo scelerisque."
    },
    {
        "image" : "images/item-3.png",
        "heading" : "heading-3",
        "text" : "Duis porttitor diam vitae leo elementum accumsan."
    }
]

如何使用jquery / ajax实现这一点？我是初学者，有人能帮我吗？耽误您时间，实在对不起。

Answer 1

嗯，首先，这取决于你使用的滑块。抽象的方法应该是这样的。

$(document).ready(function(){

    getSlides();

})


function getSlides(){

    var request = $.ajax({
        type: "POST",
        url: 'script.php',
        data: {
            action: "get_slilder_images"
        },
        dataType: "json"
    });
    request.done(function( response ) {
        createSlides(response);
        // fires on successfull reply
    });
    request.fail(function( jqXHR, textStatus ) {
        alert( "Request failed: " + textStatus );
        // fires on error
    });
    request.done(function() {
        // fires everytime transaction completes with or withoute error
    }) 
}

function createSlides(slides){

    var container = $('#sliderContainer');
    var html = '';

    for(var i = 0; i < slides.length; i++){

        html += '<li class="slide"><span class="slide-header">' + slides[i].heading + '</span><img src="' + slides[i].image + '"><span class="slide-text">' + slides[i].text + '</span></li>';

    }

    html = '<ul class="slide-list">' + html + '</ul>';
    container.html(html);

    container.someSliderPlugin(); // here it depends on what slider you use, most of them take a list as input.

}