如何用CSS动画或JavaScript定时切换两个含航班信息表格的HTML Div

我来帮你搞定这个需求！核心思路是用一个固定高度的容器包裹两个表格，默认只显示一个，通过CSS控制显示隐藏并添加过渡动画，再用JavaScript定时切换显示状态，这样就能在屏幕内完整展示内容，还能实现自动轮播效果。

下面是结合你提到的Bootstrap的完整实现方案：

完整代码示例 #

HTML结构 #

<!-- 引入Bootstrap CSS（补全你原有的链接即可） -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="flight-container">
  <!-- 离港航班表格 -->
  <div class="flight-table active">
    <h3 class="text-center">离港航班信息</h3>
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>航班号</th>
          <th>目的地</th>
          <th>预计时间</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>CA1234</td><td>北京</td><td>08:30</td><td>准点</td></tr>
        <tr><td>MU5678</td><td>上海</td><td>09:15</td><td>延误15分钟</td></tr>
        <!-- 可添加更多离港数据 -->
      </tbody>
    </table>
  </div>

  <!-- 到港航班表格 -->
  <div class="flight-table">
    <h3 class="text-center">到港航班信息</h3>
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>航班号</th>
          <th>出发地</th>
          <th>预计时间</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>CZ9012</td><td>广州</td><td>10:00</td><td>准点</td></tr>
        <tr><td>HU3456</td><td>深圳</td><td>10:45</td><td>提前到达</td></tr>
        <!-- 可添加更多到港数据 -->
      </tbody>
    </table>
  </div>
</div>

CSS样式 #

.flight-container {
  /* 固定容器高度，适配屏幕（减去顶部导航栏高度，可根据实际调整） */
  height: calc(100vh - 80px);
  overflow: hidden; /* 隐藏超出容器的内容，禁止滚动 */
  position: relative;
}

.flight-table {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  /* 添加平滑过渡动画，避免切换生硬 */
  transition: opacity 0.5s ease, visibility 0.5s ease;
  padding: 0 15px;
}

.flight-table.active {
  opacity: 1;
  visibility: visible;
}

JavaScript逻辑 #

// 获取两个表格元素
const flightTables = document.querySelectorAll('.flight-table');
let currentIndex = 0;

// 定义表格切换函数
function switchTable() {
  // 移除当前表格的激活类
  flightTables[currentIndex].classList.remove('active');
  // 循环切换到下一个表格
  currentIndex = (currentIndex + 1) % flightTables.length;
  // 给下一个表格添加激活类
  flightTables[currentIndex].classList.add('active');
}

// 初始设置第一个表格显示
flightTables[currentIndex].classList.add('active');

// 设置定时器，每隔30秒自动切换一次
setInterval(switchTable, 30000); // 30000毫秒 = 30秒

关键细节说明 #

• 容器高度适配：用calc(100vh - 80px)让容器占满屏幕高度（减去顶部可能存在的导航栏高度，你可以根据实际布局调整数值），确保内容完全在屏幕内。
• 平滑过渡效果：通过opacity和visibility的过渡动画，让表格切换更自然，避免突兀的跳变。
• 自动切换逻辑：用setInterval定时触发切换函数，通过索引循环控制两个表格的显示状态，实现自动轮播。
• Bootstrap兼容：表格直接使用Bootstrap的table系列样式，保持你原有的UI风格。

这样就能实现你想要的效果：每次只显示一个完整的航班表格，无需滚动，每隔30秒自动切换到另一个表格。

内容的提问来源于stack exchange，提问作者Vladislav Hovanec