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

前幾天做過了讓banner還有yt小視窗自動輪播，
今天來補上手動也可以控制上、下一頁的功能

老樣子先設常數，幫左右的小箭頭取名字

const arrow01 =document.querySelector(".arrow01")
const arrow02 =document.querySelector(".arrow02")

再來就不會了ㄏㄏㄏㄏㄏㄏㄏㄏ
只好再跟chatgpt學長借作業抄啦

因為之前設定動輪播的時候已經寫過「下一頁」的codeㄌ
所以這次只要補齊「上一頁」就可以了
(下一頁叫nextSlide，對應上一頁就取名prevSlide)

function prevSlide(){
  if(index ===0){
    // 如果已經在第一張，就跳到最後一張
    index =totalSlides-2
    slides02.style.transition ='none'
    slides02.style.transform = `translateX(-${slideWidth * index}px)`;

這邊出現一段完全看不懂的東東...重繪是啥???

// 強制重繪後再加 transition，避免瞬間跳轉
        setTimeout(() => {
            slides02.style.transition = 'transform 1s ease';
            slides02.style.transform = `translateX(-${slideWidth * index}px)`;
        }, 20);
    } else {
        index--;
        slides02.style.transition = 'transform 1s ease';
        slides02.style.transform = `translateX(-${slideWidth * index}px)`;
    }

有問題直接問，gpt學長說：

這段程式的用意就是：
👉 先瞬間跳到最後一張 → 再補上動畫，讓它能繼續滑動，看起來不會閃一下。

為什麼要 setTimeout？
因為瀏覽器太聰明，如果你馬上把「瞬間跳」跟「加動畫」寫在一起，它會把兩步合併處理，結果動畫就不會跑出來，只會看到瞬間閃跳。

所以我們故意「等個 20 毫秒」再加動畫，讓瀏覽器先畫好瞬移的位置，再啟動動畫，這樣就會順順的。

✅ 簡單一句話：
這段就是在「騙瀏覽器」，讓它先完成跳轉，再去跑動畫，避免畫面閃。
嗯～似懂非懂，總之就是先抄再說

最後設定箭頭對應的翻頁動作就完成啦

// 綁定點擊事件
arrow01.addEventListener("click", prevSlide);
arrow02.addEventListener("click", nextSlide);

其實我覺得從開始寫js就覺得挫折感蠻重的，五顏六色的code每個都代表著不同意思，指令多到每次感覺終於差不多記得這些熟面孔了，結果又有一堆新東東跑出來...

但最近也有在試著放寬心胸，不會的功能直接問gpt，就當作寫生字簿搞懂後一句一句抄，希望抄多了可以融會貫通真的學起來吧！

以上就是今天的進度，大家明天見ㄅㄅ