Question

所以我很确定这是一个快速修复，但这打破了我的大脑。简单我有一个带有多个div的自定义仪表板，其中有旋转数据，但是当页面第一次刷新时，数据全部加载到屏幕并显示在彼此之上，这很糟糕。

这是我的代码CSS＆amp;其中一个div（最重要的一个）

    .blended_grid {
    display: block;
    width: 100%;
    overflow: auto;
    background: #ffffff;
    margin: 0;
    padding: 1px 0 0 0;

}

.left_block_container {
    width: 20%;
    float: left;
    clear: none;
    height: 850px;

}

.left_div_1 {
    background-color: rgba(255, 255, 255, 0);
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 5px;
    position: relative;
    float: left;
    clear: none;
    width: 100%;
    height: 160px;
    padding: 1px 0 0 0;

}

#left_div_1_slideshow {
    padding-top: 5px;
    padding-left: 0px;
    position: relative;
    box-shadow: 0 0 5px rgba(43, 174, 168, 0.65);
    height: 160px;
    width: 100%;
    border-radius: 5px;
}

和HTML / PHP

<div class="blended_grid">

    <h1 style="font-family: Ubuntu; color: #2baea8; margin-left: 20px">ITIO PERFORMANCE DASHBOARD</h1>

    <div class="left_block_container">
        <div class="left_div_1" style="padding-top: 0px">
            <div id="left_div_1_slideshow">
                <div align="center">
                    <img src="images/elements/project.png" class="pull-left" alt="" height="100px" style="padding-left: 5px;">
                    <h6 style="font-size: 14px; color: #2baea8; font-weight: bold">Project Hours Total</h6>

                    <h1 style="font-size: 80px; color: #2baea8; font-weight: bold">
                        <div id="1">
                            <script>
                                $(document).ready(function () {
                                    setInterval(function () {
                                        $("#1").load("scripts/topdiv_1_stat1.php");
                                    }, 3000);
                                });
                            </script>
                        </div>
                    </h1>


                </div>

                <div align="center">
                    <img src="images/elements/project.png" class="pull-left" alt="" height="100px"
                         style="padding-left: 5px;">
                    <h6 style="font-size: 14px; color: #2baea8; font-weight: bold">Project Hours System Center</h6>

                    <h1 style="font-size: 80px; color: #2baea8; font-weight: bold">
                        <div id="2">
                            <script>
                                $(document).ready(function () {
                                    setInterval(function () {
                                        $("#2").load("scripts/topdiv_1_stat2.php");
                                    }, 3000);
                                });
                            </script>
                        </div>
                    </h1>


                </div>

                <div align="center">
                    <img src="images/elements/project.png" class="pull-left" alt="" height="100px"
                         style="padding-left: 5px;">
                    <h6 style="font-size: 14px; color: #2baea8; font-weight: bold">Project Hours Service Center</h6>

                    <h1 style="font-size: 80px; color: #2baea8; font-weight: bold">
                        <div id="3">
                            <script>
                                $(document).ready(function () {
                                    setInterval(function () {
                                        $("#3").load("scripts/topdiv_1_stat3.php");
                                    }, 3000);
                                });
                            </script>
                        </div>
                    </h1>


                </div>

            </div>
        </div>
   </div>
</div>

和JS：

<script>

    $("#left_div_1_slideshow > div:gt(0)").hide();

    setInterval(function () {
        $('#left_div_1_slideshow > div:first')
            .fadeOut(1)
            .next()
            .fadeIn(1)
            .end()
            .appendTo('#left_div_1_slideshow');
    }, 5000);
</script>

Answer 1

在html中，对于每个#left_div_1_slideshow幻灯片（第一个除外），将style="display:none"添加到外部div。通过这种方式，在javascript启动之前，只有第一张幻灯片可见。通过这样做，您可以有效地执行js的第一行，这样就可以删除该行。

<div id="left_div_1_slideshow">
    <div align="center">
        <!-- ... -->
    </div>
    <div align="center" style="display:none">
        <!-- ... -->
    </div>
    <div align="center" style="display:none">
        <!-- ... -->
    </div>
</div>

旋转div显示在彼此之上

1 个答案: