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

问题描述

我有两个 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。

标签： javascripthtmlcss

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

问题描述

解决方案

推荐阅读