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

Posted 2023-05-09

【中文标题】想用 mysql 以轮播格式显示图像

【英文标题】：want to display images in carousel format with 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+'"  style="width:100%;"></div>');
   );
  );
 );

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

【参考方案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+'"  style="width:100%;"></div>');
   else 
    $("#marquee").append('<div class="item"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'"  style="width:100%;"></div>');
  
);