使用存储在 php while 循环内的数据表中的 TimeLapse

Question

我正在尝试显示数据库中的图像，每个图像之间存在时间延迟。时间延迟可从用户界面中选择 并在几秒钟内存储在与图像相同的记录中。我已经显示了图像，但我需要添加动态时间延迟。

时间延迟存储在名为“TimeLapse”的字段中。下面我尝试使用“TimeLapse as $HoldTime”的内容每次 while 循环显示一个新图像。

第一张图片的 TimeLapse 为“5000”。 图片 2 的 TimeLapse 为“15000”。

但看起来它只对两张图像使用了第一个 TimeLapse 5000。”

任何人都可以看到我如何做到这一点。

PHP 代码

while($row_fb = mysqli_fetch_array($fb)){ ?>
    <?php $url = $ImagePath.''.$row_fb['SignageImageName'];
    $HoldTime = $row_fb['TimeLapse']?>
    <div class="outer">
    <div class="banner-container">

    <div id="wrapper">
    <a><img src="/<?php echo $url;?>" class="responsive"/></a>
    </div>
    </div>
    </div>
    <?php
    }

JAVASCRIPT

(function() {
    var a = $('.outer').children();
    var index = 0;
    run()
  
    function run() {
      a.filter('.active').fadeOut(500).removeClass('active');
      a.eq(index).fadeIn(500).addClass('active');
      index = (index + 1) % a.length;
      setTimeout(run, <?php echo $HoldTime;?>);
    }
  })();

Answer 1

我会将延迟时间放入 HTML data- attribute 并在 JavaScript 中读取以设置延迟。 （注意使用alternative syntax 和short echo tags，这会使您的PHP 代码在与HTML 混合时更具可读性。）

<?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 ?>

已清理 JS 以消除对函数外部变量的任何依赖。相反，它只是寻找活动横幅的下一个兄弟，如果没有，则循环到开头。一些测试 HTML 包含在一个可运行的示例中。

(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"));
    }
})();

.active {
    background: blue;
    color: white
}

<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="1000">foo</div>
  <div class="banner-container" data-delay-time="2000">bar</div>
  <div class="banner-container" data-delay-time="6000">baz</div>
  <div class="banner-container" data-delay-time="10000">boo</div>
</div>