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

【问题标题】：want to display images in carousel format with mysql想用 mysql 以轮播格式显示图像
【发布时间】：2018-05-12 17:15:26
【问题描述】：

我正在设计移动视图网络应用程序。我想在轮播中显示图像。当我直接编写代码（我在这里获取代码：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>');
   });
  });
 });

我想显示正确的轮播代码

【问题讨论】：

标签： javascript jquery css mysql

【解决方案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>');
  }
});

【讨论】：