PHP结合MySQL查询结果在while循环中按指定时长轮播图片异常排查

问题原因 #

1. DOM结构错误：你在PHP的while循环中把.outer容器写在了循环内部，导致每个.banner-container都被独立的.outer包裹，互相之间没有同级兄弟关系。你的JS逻辑中用active.next("div.banner-container")查找下一个轮播元素，该方法只能查找同层级的兄弟节点，自然找不到下一张图，所以轮播卡在第一张。
2. 时间单位不匹配：你提到TimeLapse字段单位是秒，但setTimeout接收的时间单位是毫秒，直接使用数据库返回值会导致轮播切换速度远快于预期，也可能造成看起来只有第一张展示的错觉。
3. 重复ID问题：循环生成的id="wrapper"不符合HTML ID唯一性规范，建议改为class。

修复方案 #

1. 修改动态生成DOM的PHP代码

把.outer容器移到循环外部，转换时间单位，修改重复ID：

<!-- 把outer放在循环外面，所有banner-container放在同一个outer下 -->
<div class="outer">
<?php while($row = $fb->fetch_array()): ?>
  <div class="banner-container" data-delay-time="<?=$row['TimeLapse'] * 1000?>">
    <div class="wrapper">
      <a>
        <img src="/<?=$ImagePath . $row['SignageImageName']?>" class="responsive"/>
      </a>
    </div>
  </div>
<?php endwhile ?>
</div>

2. 可选JS优化（非必须，原有JS改完DOM就可以正常运行）

如果需要兼容后续可能的结构调整，可以直接用索引来查找下一个元素，不依赖DOM层级：

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

  function run() {
    var banners = $("div.outer div.banner-container");
    if (!banners.length) return;
    var activeIndex = banners.filter(".active").index();
    if (activeIndex < 0) activeIndex = 0;
    var nextIndex = (activeIndex + 1) % banners.length;
    banners.eq(activeIndex).fadeOut(500).removeClass("active");
    banners.eq(nextIndex).fadeIn(500).addClass("active");
    setTimeout(run, banners.eq(nextIndex).data("delayTime"));
  }
})();

内容的提问来源于stack exchange，提问作者DCJones