时间戳

首页 > 解决方案 > 使用查询结果在 php while 循环中一个接一个地显示图像

php - 使用查询结果在 php while 循环中一个接一个地显示图像

问题描述

这是一个帖子的延续，我无法得到有效的答案，所以我又来了。

我正在尝试使用 mySQL 查询返回的数据显示图像。该查询返回一个图像文件的名称和一个时间间隔，它是一个数字（秒）。我需要在返回的秒数内显示每个图像TimeLapse。

在我的第一篇文章的帮助下，我能够显示静态但不是来自查询结果的图像。

静态方法起作用并一个接一个地显示所有图像

<div class="outer">
  <div class="banner-container" data-delay-time="1000"><img src="/<?=$ImagePath?>doubletreelandscapeoverridedemo.png" class="responsive"/></div>
  <div class="banner-container" data-delay-time="2000"><img src="/<?=$ImagePath?>covidtest.png" class="responsive"/></div>
  <div class="banner-container" data-delay-time="6000"><img src="/<?=$ImagePath?>gilhrsignagedemol.png" class="responsive"/></div>
</div>

使用查询结果只显示第一张图片

<?php while($row = $fb->fetch_array()): ?>
  <div class="outer">
    <div class="banner-container" data-delay-time="<?=$row['TimeLapse']?>">
      <div id="wrapper">
        <a>
          <img src="/<?=$ImagePath . $row['SignageImageName']?>" class="responsive"/>
        </a>
      </div>
    </div>
  </div>
<?php endwhile ?>

(function() {
  $("div.outer div.banner-container").hide();
  run();

  function run() {
    // get a list of all the banners
    var banners = $("div.outer div.banner-container");
    if (!banners.length) {
      return;
    }
    // active is the one with "active" class, or the first one
    var active = banners.filter(".active").first();
    if (!active.length) {
      active = banners.first();
    }
    // get the next one or loop to the beginning again
    var next = active.next("div.banner-container");
    if (!next.length) {
      next = banners.first();
    }
    active.fadeOut(500).removeClass("active");
    next.fadeIn(500).addClass("active");
    // get the delay time from the data-delay-time attribute
    setTimeout(run, next.data("delayTime"));
  }
})();

谁能看到我哪里出错了。

标签： phpjquery

解决方案

问题是因为创建div元素的 PHP 循环在错误的位置。.outer您多次重复整个结构，每次都包含一个.banner-container.

相反，您应该在单个内部循环.outer并在其中创建多个.banner-container元素，如下所示：

<div class="outer">
  <?php while($row = $fb->fetch_array()): ?>
    <div class="banner-container" data-delay-time="<?=$row['TimeLapse']?>">
      <div>
        <a>
          <img src="/<?=$ImagePath . $row['SignageImageName']?>" class="responsive"/>
        </a>
      </div>
    </div>
  <?php endwhile ?>
</div>

请注意，我id在循环中从 HTML 中删除了该属性，因为这将导致重复，这是无价值的。

通过此更正，您的代码可以正常工作：

jQuery($ => {
  run();

  function run() {
    var banners = $("div.outer div.banner-container");
    if (!banners.length) {
      return;
    }
    
    // active is the one with "active" class, or the first one
    var active = banners.filter(".active").first();
    if (!active.length) {
      active = banners.first();
    }
    
    // get the next one or loop to the beginning again
    var next = active.next("div.banner-container");
    if (!next.length) {
      next = banners.first();
    }
    active.fadeOut(500).removeClass("active");
    next.fadeIn(500).addClass("active");
    
    // get the delay time from the data-delay-time attribute
    setTimeout(run, next.data("delayTime"));
  }
});
div.outer div.banner-container { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
  <div class="banner-container" data-delay-time="2000">
    <div class="wrapper">
      <a><img src="/foo.jpg" class="responsive" /></a>
    </div>
  </div>
  <div class="banner-container" data-delay-time="2000">
    <div class="wrapper">
      <a><img src="/foo.jpg" class="responsive" /></a>
    </div>
  </div>
  <div class="banner-container" data-delay-time="2000">
    <div class="wrapper">
      <a><img src="/foo.jpg" class="responsive" /></a>
    </div>
  </div>
</div>

请注意，我使用 CSSdiv.outer div.banner-container在加载时隐藏元素以避免FOUC，并将 JS 逻辑中的 IIFE 转换为 document.ready 事件处理程序，以确保 jQuery 代码始终在DOM 加载后执行。

推荐阅读