加载JSON

JavaScript

$(function(){
    $('#owl-demo').owlCarousel({
        jsonPath: 'json/data.json'
    });
});

JSON

{
    "owl" : [
        {"item" : "<a class='item'><img src='img/owl1.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl2.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl3.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl4.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl5.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl6.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl7.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl8.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl1.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl2.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl3.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl4.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl5.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl6.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl7.jpg' alt=''></a>"},
        {"item" : "<a class='item'><img src='img/owl8.jpg' alt=''></a>"}
    ]
}

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%;
}

dowebok.com 说 明 下 载