Question

您好我想实现一个javascript / jquery滑块，其中所有数据都来自json文件，我想打印所有图像和一些图像描述的图像，我想要滑动所有数据与相应的下面的bootstrap 3图像是json文件，你能告诉我如何实现这个

{
    data: [{
        slug: "allsopp-allsopp",
        id: 401,
        imageToken: "d045e18526f988cceb63b08e71180fb6595d9f27",
        name: "Allsopp & Allsopp",
        location: "Dubai",
        description: "Allsopp & Allsopp is a family",
        residentialForRentCount: 521,
        residentialForSaleCount: 1114,
        commercialForRentCount: 1,
        commercialForSaleCount: 0,
        commercialTotalCount: 1,
        totalProperties: 1636,
        agentCount: 57,
        licenseLabel: "RERA",
        licenseNumber: "1815",
        phone: "+971 4 429 4444",
        links: {
            self: "/en/broker/allsopp-allsopp-401",
            logo: "https://www.propertyfinder.ae/images/pf_broker/logo/d045e18526f988cceb63b08e71180fb6595d9f27/desktop",
            logo2x: "https://www.propertyfinder.ae/images/pf_broker/logo/d045e18526f988cceb63b08e71180fb6595d9f27/desktop2x"
        }
    },
    {
        slug: "espace-real-estate",
        id: 524,
        imageToken: "2d4dfd5c40d4079dd962adf2fd6277dc3e1e9f2e",
        name: "Espace Real Estate",
        location: "Dubai",
        description: "UAE. Tel no: 043069999 ORN:936",
        residentialForRentCount: 366,
        residentialForSaleCount: 355,
        commercialForRentCount: 0,
        commercialForSaleCount: 1,
        commercialTotalCount: 1,
        totalProperties: 722,
        agentCount: 34,
        licenseLabel: "RERA",
        licenseNumber: "936",
        phone: "04 306 9999",
        links: {
            self: "/en/broker/espace-real-estate-524",
            logo: "https://www.propertyfinder.ae/images/pf_broker/logo/2d4dfd5c40d4079dd962adf2fd6277dc3e1e9f2e/desktop",
            logo2x: "https://www.propertyfinder.ae/images/pf_broker/logo/2d4dfd5c40d4079dd962adf2fd6277dc3e1e9f2e/desktop2x"
        }
    }]
}

Answer 1

在jQuery API网站上描述：jQuery.getJSON() 会建议像：

HTML：

<div id='slider'>

</div>

JS：

$.getJSON( 'pathToJsonFile', function( data ) {
  var items = [];
  $.each( data, function() {
    var $thisImage = this.links.logo2x,
         $thisDesc = this.description;
    items.push( "<li ><img src='" + $thisImage + "'/> " + $thisDesc + "</li>" );
  });

  $( "<ul/>", {
    html: items.join( "" )
  }).appendTo( "#slider" );
 });

循环浏览数据元素并将它们作为列表项附加到滑块列表，然后再调用该div上的所选图像滑块。

在jquery中从json获取数据

1 个答案: