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

Question

我正在设计移动 View 网络应用程序。我想在 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" except first.

这可能有效:

$.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>');
  }
});