🎞️ 自動幻燈片播放教學

讓我們使用 JavaScript 製作每 3 秒切換一次圖片的幻燈片播放效果！

🏖 觀光／旅遊網站：自動展示推薦景點
🏪 商品介紹：自動切換新品或促銷橫幅
👶 相片集：自動播放活動或回憶照片

💡 幻燈片切換的原理

以下 JavaScript 程式碼使用陣列管理圖片路徑，
並透過 setInterval() 每隔幾秒依序切換圖片。
最初只顯示一張圖片，但在頁面載入後，會自動切換到下一張，這就是自動幻燈片的基本結構。

<script>
const images = [
  "/assets/images/sample1.jpg",
  "/assets/images/sample2.jpg",
  "/assets/images/sample3.jpg"
  // 伺服器用絕對路徑（範例）：
  // "https://yourdomain.com/assets/images/sample1.jpg"
];
let currentIndex = 0;

function showNextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById("slideshow").src = images[currentIndex];
}

setInterval(showNextImage, 3000); // 每 3 秒切換一次
</script>

👇 實際效果 👇

📏 解決圖片大小不一的對策

如果圖片為直式或正方形等尺寸不一時，會因圖片高度不同導致頁面整體版面（特別是下方文字）出現位移。

此時可透過設定 height 固定高度，再使用 object-fit 進行裁切或補空白處理。

💡 方法一：裁切圖片統一高度（object-fit: `cover`）

📸 以圖片中心為基準進行放大與裁切
✨ 外觀整齊一致
🪄 類似 Instagram 的處理方式

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>自动幻灯片演示示例</title>
  <style>
    .slideshow {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎞️ 自动幻灯片演示示例</h1>
    <img id="slideshow" class="slideshow" src="/assets/images/sample1.jpg" alt="幻灯片图像">
  </div>

  <script>
    const images = [
      "/assets/images/sample1.jpg",
      "/assets/images/sample2.jpg",
      "/assets/images/sample3.jpg"
    ];
    let currentIndex = 0;

    function showNextImage() {
      currentIndex = (currentIndex + 1) % images.length;
      document.getElementById("slideshow").src = images[currentIndex];
    }

    setInterval(showNextImage, 3000); // 每3秒切换一次
  </script>
</body>
</html>

👇 效果如下 👇

💡 方法二：添加上下边距以显示完整图片（object-fit: `contain`）

🖼 可以完整显示图像的每个边缘
⬜ 使用留白对齐高度
🔲 适用于以缩略图方式展示

即使图片高度不同，也会显示每张图片的完整内容。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>幻灯片（contain）</title>
  <style>
    .slideshow {
      width: 100%;
      height: 400px;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎞️ 幻灯片演示（object-fit: contain）</h1>
    <img id="slideshow-contain" class="slideshow" src="/assets/images/sample1.jpg" alt="幻灯片图片">
  </div>

  <script>
    const images = [
      "/assets/images/sample1.jpg",
      "/assets/images/sample2.jpg",
      "/assets/images/sample3.jpg"
    ];
    let currentIndex = 0;

    function showNextImage() {
      currentIndex = (currentIndex + 1) % images.length;
      document.getElementById("slideshow-contain").src = images[currentIndex];
    }

    setInterval(showNextImage, 3000); // 每3秒切换
  </script>
</body>
</html>

👇实际效果👇

🖐 自动+手动切换，提高用户体验

除了自动播放幻灯片外，添加手动切换功能可以让用户在自己希望的时间点自由控制，界面更灵活。

例如可以添加以下按钮，通过点击来切换图片，从而大幅提升可用性：

◀️ 上一张 按钮：返回上一张图片
▶️ 下一张 按钮：跳到下一张
⏸ 暂停功能：更完善

这样用户可以在享受自动播放的同时，按照自己的节奏控制幻灯片。
尤其在商品展示或相册等页面，手动控制能够满足“我想仔细看看”的需求。

使用 JavaScript 的 clearInterval() 和 setInterval() 即可轻松实现暂停和恢复播放的逻辑。
结合自动播放与手动控制，打造更加精致的幻灯片界面！