30天做出一個線上相簿

html

yuuuun 2025-10-17 23:01:12 ‧ 149 瀏覽

分享至

Day 14 學習報告

主題：新增幻燈片播放模式（全螢幕播放圖片）

一、學習目標

這一天的目標是讓相簿更具互動性與展示性。我希望使用者能在瀏覽照片時，像看幻燈片一樣自動播放整個相簿，因此設計了一個「全螢幕幻燈片模式」。這不僅讓作品看起來更有完整感，也提供展示、回憶、分享時的便利性。

二、學習過程與方法

在技術上，我運用JavaScript的 setInterval() 來控制播放節奏，每隔三秒自動切換下一張圖片。為了強化體驗，我使用了HTML5的 requestFullscreen() API讓畫面能全螢幕播放。同時，我在畫面上新增一個「播放」按鈕與「結束播放」按鈕，讓使用者能隨時啟動或結束幻燈片。在實作中，我還必須確保播放過程中圖片資訊能正確顯示，因此在播放時同步顯示圖片名稱與分類資訊。

三、實作成果

完成後，使用者只要上傳幾張照片，就能按下「播放幻燈片」進入全螢幕模式，照片會自動輪播，顯示名稱與分類。此外，按下「ESC」或「結束播放」按鈕即可結束播放並回到主畫面。整體操作流暢、效果自然，特別適合用於作品展示或旅遊回顧時使用。這次的功能讓相簿從「靜態瀏覽」正式邁向「互動展示」。

四、主要程式碼區塊

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Day14 – 幻燈片播放模式</title>
  <style>
    /*  統一設計風格 */
    :root {
      --bg: #ffffff;
      --primary: darkorange;
      --accent: coral;
      --text: #333;
      --muted: #777;
      --border: #e6e6e6;
      --btn: #ff8c42;
      --btn-hover: #ff6a00;
      --card-bg: #fff;
    }

    body {
      font-family: "Microsoft JhengHei", Arial, sans-serif;
      background-color: var(--bg);
      margin: 20px;
      text-align: center;
    }

    h1 { color: var(--primary); }
    p { font-size: 18px; color: var(--accent); }

    input[type="text"], input[type="file"], select, button {
      margin: 10px;
      padding: 8px 15px;
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 16px;
      cursor: pointer;
    }

    button {
      background-color: var(--btn);
      color: white;
      border: none;
      transition: 0.3s;
    }

    button:hover {
      background-color: var(--btn-hover);
    }

    /*  相簿展示 */
    #gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    .photo-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px;
      background: var(--card-bg);
      text-align: center;
      position: relative;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .photo-card img {
      width: 100%;
      border-radius: 10px;
      border: 2px solid #ddd;
    }

    .info {
      font-size: 14px;
      color: var(--text);
      margin-top: 8px;
      line-height: 1.5;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }

    .category-tag {
      background: var(--accent);
      color: white;
      border-radius: 5px;
      padding: 3px 8px;
      font-size: 12px;
      position: absolute;
      top: 8px;
      left: 8px;
    }

    /*  幻燈片播放區 */
    #slideshow {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      color: white;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 999;
    }

    #slideshow img {
      max-width: 90%;
      max-height: 80%;
      border-radius: 15px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }

    #slideshow button {
      margin-top: 20px;
      background: gold;
      color: black;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>我的線上相簿</h1>
  <p>Day14：新增幻燈片播放模式（全螢幕播放圖片）</p>

  <!--  搜尋 -->
  <input type="text" id="search" placeholder="輸入關鍵字搜尋（分類或檔名）" />

  <!--  分類 -->
  <label for="category">選擇分類：</label>
  <select id="category">
    <option value="旅遊"> 旅遊</option>
    <option value="生活"> 生活</option>
    <option value="寵物"> 寵物</option>
  </select>

  <!-- 上傳 + 播放 -->
  <input type="file" id="upload" accept="image/*" multiple>
  <button id="playBtn">播放幻燈片</button>

  <!--  相簿展示 -->
  <div id="gallery"></div>

  <!-- 幻燈片全螢幕模式 -->
  <div id="slideshow">
    <img id="slideImg" src="">
    <p id="slideInfo"></p>
    <button id="exitBtn">結束播放</button>
  </div>

  <script>
    const upload = document.getElementById("upload");
    const gallery = document.getElementById("gallery");
    const categorySelect = document.getElementById("category");
    const searchInput = document.getElementById("search");
    const playBtn = document.getElementById("playBtn");
    const slideshow = document.getElementById("slideshow");
    const slideImg = document.getElementById("slideImg");
    const slideInfo = document.getElementById("slideInfo");
    const exitBtn = document.getElementById("exitBtn");

    let photos = [];
    let slideIndex = 0;
    let slideTimer = null;

    //  上傳圖片
    upload.addEventListener("change", function() {
      const category = categorySelect.value;
      Array.from(this.files).forEach(file => {
        const reader = new FileReader();
        reader.onload = function(e) {
          const img = new Image();
          img.onload = function() {
            const photoData = {
              category: category,
              name: file.name,
              size: (file.size / 1024).toFixed(1),
              width: img.width,
              height: img.height,
              src: e.target.result
            };
            photos.push(photoData);
            renderGallery(photos);
          };
          img.src = e.target.result;
        };
        reader.readAsDataURL(file);
      });
    });

    //  搜尋功能
    searchInput.addEventListener("input", function() {
      const keyword = this.value.toLowerCase();
      const filtered = photos.filter(photo =>
        photo.category.toLowerCase().includes(keyword) ||
        photo.name.toLowerCase().includes(keyword)
      );
      renderGallery(filtered);
    });

    //  顯示相簿
    function renderGallery(list) {
      gallery.innerHTML = "";
      list.forEach(photo => {
        const card = document.createElement("div");
        card.classList.add("photo-card");

        const tag = document.createElement("div");
        tag.classList.add("category-tag");
        tag.textContent = photo.category;

        const img = document.createElement("img");
        img.src = photo.src;

        const info = document.createElement("p");
        info.classList.add("info");
        const shortName = photo.name.length > 25 ? photo.name.slice(0, 25) + "..." : photo.name;
        info.textContent = 
          `分類: ${photo.category} ｜ 檔名: ${shortName} ｜ 大小: ${photo.size} KB ｜ 尺寸: ${photo.width}x${photo.height}`;

        card.appendChild(tag);
        card.appendChild(img);
        card.appendChild(info);
        gallery.appendChild(card);
      });
    }

    // 幻燈片播放
    playBtn.addEventListener("click", function() {
      if (photos.length === 0) {
        alert("請先上傳圖片再播放幻燈片！");
        return;
      }
      slideIndex = 0;
      slideshow.style.display = "flex";
      showSlide();
      slideTimer = setInterval(nextSlide, 3000);
      document.documentElement.requestFullscreen();
    });

    function showSlide() {
      const photo = photos[slideIndex];
      slideImg.src = photo.src;
      slideInfo.textContent = `${photo.name} (${photo.category})`;
    }

    function nextSlide() {
      slideIndex = (slideIndex + 1) % photos.length;
      showSlide();
    }

    //  結束播放
    exitBtn.addEventListener("click", exitSlideshow);
    document.addEventListener("keydown", e => {
      if (e.key === "Escape") exitSlideshow();
    });

    function exitSlideshow() {
      clearInterval(slideTimer);
      slideshow.style.display = "none";
      if (document.fullscreenElement) document.exitFullscreen();
    }

    console.log("Day14：幻燈片播放模式完成");
  </script>
</body>
</html>