用目前索引渲染作品內容
修改檔案:script.js
完成後看見:標題、描述與張數來自 slides[index]
CHAPTER 17 · PRACTICE WORKSPACE
可前後切換並抽取練習提示的原生 JavaScript 輪播
TASK STATUS
修改檔案:script.js
完成後看見:標題、描述與張數來自 slides[index]
修改檔案:script.js
完成後看見:最後一張可回第一張,第一張可回最後一張
修改檔案:script.js
完成後看見:每次點擊顯示一項有效提示
WORKSPACE
已完成 TASK-01;先核對可見結果,再前往 TASK-02。
FOCUS TASK · TASK-02
比較:循環會把最後一張接回第一張,clamp 則停在邊界;需求不同,不能混用。
現在做:在 Checkpoint 2 先記錄目前的 modulo 寫法,再暫時以 Math.min(currentIndex + 1, slides.length - 1) 取代下一張規則,觀察末張停住;復原 modulo 後重跑首尾操作。
預期:完成後能觀察到「最後一張可回第一張,第一張可回最後一張」,並說出循環會把最後一張接回第一張,clamp 則停在邊界;需求不同,不能混用。
證據:用前後截圖或口述比較「最後一張可回第一張,第一張可回最後一張」,指出這個小型實驗如何證明循環會把最後一張接回第一張,clamp 則停在邊界;需求不同,不能混用。
比較:上一張與下一張都要更新同一個 index,再交給 render 顯示。
現在做:在 Checkpoint 2 依序按下一張兩次、上一張一次,記錄 slide-count 的變化,再回看兩個事件是否都更新同一個 currentIndex 並呼叫 renderSlide()。
預期:完成後能觀察到「最後一張可回第一張,第一張可回最後一張」,並說出上一張與下一張都要更新同一個 index,再交給 render 顯示。
證據:用前後截圖或口述比較「最後一張可回第一張,第一張可回最後一張」,指出這個小型實驗如何證明上一張與下一張都要更新同一個 index,再交給 render 顯示。
完成條件:DONE-02:最後一張可回第一張,第一張可回最後一張
CAROUSEL LAB
內容由 render 更新。
提示會出現在這裡。
CHAPTER HANDOFF
接收:第 16 章已驗收判斷、works 陣列迴圈 render 與 localStorage 清除邊界;本章改在獨立輪播頁練習同一個「資料陣列 → render → DOM」責任模式。
本章交棒:slides、currentIndex、renderSlide()、首尾 modulo 與提示陣列的有效索引;第 18 章會在獨立 timer 頁加入時間生命週期,不共用本頁 HTML。
CONTINUE
前往 Checkpoint 2,依要求完成「完成可首尾循環的前後切換」。