如何使用动画定期在两个html div之间切换

Question

我有两个div包含表格的html代码，其中包含有关飞机起飞和到达的信息，如下所示。第二个表位于第一个表下，但它对于屏幕来说太大了，我需要它在屏幕上显示而不滚动。所以我需要只显示一个表，并使用CSS动画或javascript以规则的间隔（例如30秒）在表之间切换。 有人可以帮帮我吗？

CSS：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
    body {
        background-image: url("kosiceBackground.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 1920px 1080px;
    <!-- Neskor bude treba nastavit backgroung-size na 1920*1080  -->
    }

    h1 {
        color: #3900ff;
        text-align: center;
    }
    h4 {
        color: #000000;
        text-align: center;
    }
    h5 {
        color: #ff0712;
        text-align: center;
    }

    p {
        font-family: verdana;
        font-size: 20px;
    }
    span {
        color: #3900ff;
    }

    .table{
        background-color: #3b3b3b !important;
        /* border: 1px solid black !important;*/
        opacity:0.8 !important;
        color: whitesmoke !important;
        border-radius: 20px;
    }

    .table td, .table th{
        border-top: 1px solid black !important;
        /*  border-bottom: 1px solid black;*/

    }

    .table tr:first-child, .table th:first-child {
        border-top: none !important;
    }
</style>

HTML：

<div class="row justify-content-center">
<div>
    <div class="container" style="margin:50px">
        <div class="row text-center"><h1 style="text-align: center; color: whitesmoke;">Departures</h1></div>
        <table class="table table-striped">
            <thead >
            <tr >
                <th style="border-top: none !important;">Airline</th>
                <th style="border-top: none !important;">Estimated time</th>
                <th style="border-top: none !important;">Scheduled time</th>
                <th style="border-top: none !important;">Flight number</th>
                <th style="border-top: none !important;">Status</th>
                <th style="border-top: none !important;">Gate</th>
                <th style="border-top: none !important;">To</th>
            </tr>
            </thead>
            <tbody>

            <c:forEach var="departure" items="${departuresArrivals.departures}">
                <tr id="dep">
                    <td>${departure.airline}</td>
                    <td>${departure.estimated}</td>
                    <td>${departure.scheduled}</td>
                    <td>${departure.flightNumber}</td>
                    <td>${departure.status}</td>
                    <td>${departure.gate}</td>
                    <td>${departure.to}</td>
                </tr>
            </c:forEach>
            <tr>
            </tbody>
        </table>
    </div>
</div>
<div>
    <div class="container" style="margin:50px">
        <div class="row text-center"><h1 style="text-align: center; color: whitesmoke;">Arrivals</h1></div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th style="border-top: none !important;">Airline</th>
                <th style="border-top: none !important;">Estimated time</th>
                <th style="border-top: none !important;">Scheduled time</th>
                <th style="border-top: none !important;">Flight number</th>
                <th style="border-top: none !important;">Status</th>
                <th style="border-top: none !important;">From</th>
            </tr>
            </thead>
            <tbody>

            <c:forEach var="arrival" items="${departuresArrivals.arrivals}">
                <tr>
                    <td>${arrival.airline}</td>
                    <td>${arrival.estimated}</td>
                    <td>${arrival.scheduled}</td>
                    <td>${arrival.flightNumber}</td>
                    <td>${arrival.status}</td>
                    <td>${arrival.from}</td>
                </tr>
            </c:forEach>
            <tr>
            </tbody>
        </table>
    </div>
</div>

带表格的Div有class = container。

Answer 1

您可以使用JavaScript AJAX使其更加安静。您可以编写使用按钮调用的函数，并使用这些函数在两个<div>元素之间切换。