Question

大家好，我试图根据为特定内容设置的间隔时间在div中一次显示我的内容数据。

我的要求是我要一组包含多个内容，例如文本，图像或视频，例如，如果我向一组添加了3个内容，则这三个内容需要根据我设置的特定间隔时间运行一个b一每个内容的时间，例如30秒，40秒，50秒现在在我的代码中，所有3个div都显示在同一页面中，并且间隔时间也不起作用

任何人都可以帮助我解决这个问题。

这是我的查看页面代码：

<!--Display Dynamic Content-->
<div class="container">
    <h2>Text Content</h2>
    <?php
    if (!empty($displaycontent)) {
        foreach ($displaycontent as $content) {
            $time = $content->displaytime;
            $typeofinfo = $content->typeofinfo;
            $content = $content->details;

            $seconds = strtotime("1970-01-01 $time UTC");
            $miliseconds = $seconds * 1000;
            echo $seconds . "\n" . $miliseconds; 

        if ($typeofinfo == '2') {
                ?>
                <div id="pageContent" class="panel panel-default">
                    <div class="panel-body">
                 <?php echo $content; ?>
                    </div>
                </div>
            <?php
        } elseif ($typeofinfo == '8') {
            ?>
                <div id="pageContent" class="panel panel-default">
                    <div class="panel-body">
                        <img src="<?=site_url('new/'.$content); ?>">
                    </div>
                </div>

            <?php
        } elseif ($typeofinfo == '6') {
            ?>
                 <div id="pageContent" class="panel panel-default">
                    <div class="panel-body">
                        <video width="400" controls>
                            <source src="<?=site_url('new/'.$content); ?>" type="video/mp4">
                            Your browser does not support HTML5 video.
                        </video>
                    </div>
                </div>
            <?php
        }
    }
}
?> 
</div>


<script>
var inputTime=<?php echo $miliseconds;?>;
window.onload=function()
{
  setTimeout(hidePage, inputTime);

};

function hidePage()
{
    $("#pageContent").show();

}
</script>

谢谢。

Answer 1

您有重复的ID： pageContent 。更改为类或添加最终编号，例如：pageContent1，pageContent2，pageContent3

setTimeout设置一个计时器，该计时器在计时器到期后执行一次功能或指定的代码段。因此，您需要再次执行setTimeout才能完成任务。

更改pageContent以对您的js进行分类将是：

document.addEventListener("DOMContentLoaded", function(event) {
    $(".pageContent").hide();
    var timeout = $(".pageContent").first().data('timeout');
    setTimeout(hidePage, timeout, $(".pageContent"));
});

function hidePage(eles) {
    if (eles.length>0) {
        $(".pageContent").hide();
        eles.first().show();
        eles = eles.slice(1);
        var timeout = eles.first().data('timeout') || 0;
        setTimeout(hidePage, timeout, eles);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--Display Dynamic Content-->
<div class="container">
    <h2>Text Content</h2>
    <div class="pageContent panel panel-default" data-timeout="<?php echo $miliseconds;?>">
        <div class="panel-body">
            content1
        </div>
    </div>
    <div class="pageContent panel panel-default" data-timeout="<?php echo $miliseconds;?>">
        <div class="panel-body">
            content2
        </div>
    </div>
    <div class="pageContent panel panel-default" data-timeout="<?php echo $miliseconds;?>">
        <div class="panel-body">
            content3
        </div>
    </div>
</div>

根据codeigniter中的间隔时间逐个显示div

1 个答案: