各位鄉親晚安，歡迎來到 coding 小白盜版學校官網的第16天～這個計畫的內容是我這個 coding 超新手會在這30天裡，把複刻學校官網當作目標，從最基礎的前端 html、css、js...開始邊做邊學，紀錄每天的學習進度，看看一個月過去能學到什麼程度。

今天重啟我們的盜版大業，來做 youtube 連結小視窗的輪播！
之前已經做(抄)過大橫幅 banner 的輪播效果，所以基本上只需要照搬然後微調一些小數字就好了
(↓↓↓↓↓前幾天跟chatgpt學長抄來ㄉ↓↓↓↓↓)

const slides = document.querySelector('.slides');  // 找到 slides 容器
const totalImages = 5;                             // 真正圖片數量
let index = 0;                                     // 當前圖片索引
const intervalTime = 4000;                         // 每張停留時間（毫秒）

function nextSlide() {
  index++;                                         // 移到下一張
  slides.style.transition = 'transform 1s ease';   // 平滑滑動
  slides.style.transform = `translateX(-${(100/6)*index}%)`; // 滑到對應位置

  // 如果到最後一張（複製的第一張）
  if (index === totalImages) {
    setTimeout(() => {
      slides.style.transition = 'none';          // 取消動畫
      slides.style.transform = 'translateX(0%)'; // 拉回第一張
      index = 0;                                 // 重置索引
    }, 1000); // 等待 1 秒，與 transition 時間一致
  }
}

雖然當初搬運的時候完全無法理解這是在做甚麼，但經過一天的js惡補，現在已經可以看懂7788ㄌ

複製貼上一份 vscode 馬上顯示紅字警告同樣的不能重複宣告
於是我趕緊幫雙胞胎加上編號第一份的後面都備註01、第二份都備註0

再來因為banner是五張照片輪播
而這次的yt小視窗只有三個，有些數字的部分需要改掉...

Do Re Mi So～成果展示時間～

const slides01 = document.querySelector(".slides01");  // 找到 slides 容器
const totalImages01 = 6;                               // 5 張真實 + 1 張複製
let index01 = 0;                                       // 當前圖片索引
const intervalTime01 = 4000;                           // 每張停留時間（毫秒）

function nextSlide01() {
  index01++;
  slides01.style.transition = 'transform 1s ease';   
  slides01.style.transform = `translateX(-${(100/totalImages01)*index01}%)`;

  // 如果到最後一張（複製的第一張）
  if (index01 === totalImages01 - 1) {
    setTimeout(() => {
      slides01.style.transition = 'none';
      slides01.style.transform = 'translateX(0%)';
      index01 = 0;
    }, 1000); // 與 transition 時間一致
  }
}

// 每 intervalTime01 自動切換
setInterval(nextSlide01, intervalTime01);

const slides02 = document.querySelector(".slides02");
const totalSlides = 4;       // 三張實際 + 一張複製
const slideWidth = 450;      // 每個 iframe 寬度
let index = 0;
const intervalTime = 4000;   // 每張停留時間

function nextSlide() {
    index++;
    slides02.style.transition = 'transform 1s ease';
    slides02.style.transform = `translateX(-${slideWidth * index}px)`;

    // 如果到達最後一張（複製的第一張）
    if (index === totalSlides - 1) {
        setTimeout(() => {
            slides02.style.transition = 'none';
            slides02.style.transform = `translateX(0px)`; // 無縫回到第一張
            index = 0;
        }, 1000); // 與 transition 時間一致
    }
}

// 每 intervalTime 自動切換
setInterval(nextSlide, intervalTime);

其實中間也是折騰了很久，原本一個一個敲，改了老半天還是東缺西漏，直接請chatgpt幫忙一次搞定
果然有些事情還是交給電腦做最有效率

總結而言今天就是處處充滿波折但最後還是順利完成的一天...突然有種回到大二還在建模軟體中打滾掙扎的錯覺。建模和coding有著異曲同工之妙，很多時候明明都照著說明書做了，但就是永遠會破圖、效果沒反應、材質無法套用...以前AI還沒普及都要花上老半天一遍一遍重做研究問題出在哪，打死找不到答案也是常有的事，現在就算遇到鬼打強的情況至少也能跟chatgpt討論，省了很多時間，不得不感嘆真的是科技改變生活的時代ㄋ

今天就先這樣啦，明天想來試試在自動輪播的banner和yt視窗兩邊加上可以手動上下頁的icon，祝我順利吧，大家明天見ㄅㄅ～