想用mysql以轮播格式显示图像

Question

我在设计移动视图网络应用。 我想在Carousel中显示图像。当我直接编写代码（我在这里得到代码：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h）然后它工作正常。但是，当我将MySQL代码附加到它的显示内联格式时，如下所示：

这是我的轮播代码： -

<div class="row">
<div class="col s12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">


<!-- Wrapper for slides -->
<div class="carousel-inner" id="marquee">

</div>

</div>

</div>
</div>

这是javascript代码： -

 $(document).ready(function()
 {
  var url="http://api.dentallabworld.com/marquee.php"; //This file returns json data
   $.getJSON(url,function(result){
   console.log(result);
    $.each(result, function(i, field){
    var id=field.Id;
    var marquee=field.Image;
     $("#marquee").append('<div class="item active"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>');
   });
  });
 });

我想显示正确的轮​​播代码

Answer 1

因为你的循环添加class="item active"每个元素并显示所有元素。除了第一个，您可以添加class="item"。

这可能有效：

$.each(result, function(i, field){
  var id=field.Id;
  var marquee=field.Image;
  if(i==0){
    $("#marquee").append('<div class="item active"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>');
  } else {
    $("#marquee").append('<div class="item"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>');
  }
});