代码之家 › 专栏 › 技术社区 › suresh

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

codeigniter html javascript

suresh · 技术社区 · 6 年前

嗨,伙计们,我正试图根据为特定内容设置的间隔时间,在div中逐个显示我的内容数据。

我的要求是我有一个组,该组包含多个内容,如文本、图像或视频。例如,如果我在一个组中添加了3个内容,则这三个内容需要运行一个b one,具体取决于它们的特定间隔时间。我为每个内容设置了时间,如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>

提前谢谢。

1 回复 | 直到 6 年前

gaetanoM 6 年前

您有重复的ID: 页面内容 . 更改为类或添加最后一个数字,如: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>