自定义JSON

JavaScript

$(function(){
    $('#owl-demo').owlCarousel({
        items: 4,
        jsonPath: 'json/customData.json',
        jsonSuccess: customDataSuccess
    });

    function customDataSuccess(data){
        var content = '';
        for(var i in data['items']){
            var img = data['items'][i].img;
            var alt = data['items'][i].alt;
            var link = data['items'][i].link;
            content += '<a class="item" href="' +link+ '"><img src="' +img+ '" alt="' +alt+ '">';
        }
        $('#owl-demo').html(content);
    }
});

JSON

{
    "items" : [
        {
            "img": "img/owl1.jpg",
            "alt" : "Owl Image 1",
            "link" : "https://www.dowebok.com/"
        },
        {
            "img": "img/owl2.jpg",
            "alt" : "Owl Image 2",
            "link" : "https://www.dowebok.com/93.html"
        },
        {
            "img": "img/owl3.jpg",
            "alt" : "Owl Image 3",
            "link" : "https://www.dowebok.com/92.html"
        },
        {
            "img": "img/owl4.jpg",
            "alt" : "Owl Image 4",
            "link" : "https://www.dowebok.com/91.html"
        },
        {
            "img": "img/owl5.jpg",
            "alt" : "Owl Image 5",
            "link" : "https://www.dowebok.com/90.html"
        },
        {
            "img": "img/owl6.jpg",
            "alt" : "Owl Image 6",
            "link" : "https://www.dowebok.com/89.html"
        },
        {
            "img": "img/owl7.jpg",
            "alt" : "Owl Image 7",
            "link" : "https://www.dowebok.com/88.html"
        },
        {
            "img": "img/owl8.jpg",
            "alt" : "Owl Image 8",
            "link" : "https://www.dowebok.com/87.html"
        }
    ]
}

HTML

<div id="owl-demo" class="owl-carousel">
</div>

CSS

#owl-demo {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#owl-demo .item {
    display: block;
    margin: 5px;
}
#owl-demo img {
    display: block;
    width: 100%;
    border: 0 none;
}

dowebok.com 说 明 下 载