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

首頁靜態視覺都刻得差不多了，所以今天想說來做ㄍbanner的自動輪播效果
老樣子先問問chatgpt學長：我想在我的網頁上做一個自動輪播的banner應該怎麼做？

他給了我兩個選項：

1. 直接用 現成的套件/框架（例如 Swiper.js、Bootstrap Carousel）
2. 自己用 HTML + CSS + JavaScript 做簡單的輪播

積極好學的我肯定是選擇自己穩扎穩打從零開始敲嘍
既然提到 JavaScript 了，那就趁這個機會來學學這個慕名已久的新東西吧

每當學習新技能我習慣做的第一件事情就是在網路上搜尋

ㄜ啊...字好多頭暈...

還是看看youtube影片好了
是熟悉的papaya電腦教室耶，就決定看你了

越看越不妙...好複雜的英文...好多符號...
總感覺知識輕輕地從腦袋上空飄過去了，揮揮衣袖不帶走一片雲彩
感覺不是一兩個小時可以消化完的內容，而且也沒有講到關於輪播之類的動態效果

…對不起木瓜老師，我明天再來慢慢跟著你的影片練習...
因為我今天已經下定決心今天要做出輪播 bannerㄌ！為了速成只好來找chatgpt學長抄答案

根據學長的教學，想要做 banner 的自動連播效果需要分別在 html、css、js 檔裡設定

html：放上所有要輪播的圖片

這次要輪播五張圖片，所以就放五個img標籤；
然後為了要製作滑動換頁效果，所以要設兩層div

<div class="slides">
    <img class="img03" src="img\banner_01.jpg" alt="大橫幅01">
    <img class="img03" src="img\banner_02.jpg" alt="大橫幅02">
    <img class="img03" src="img\banner_03.png" alt="大橫幅03">
    <img class="img03" src="img\banner_04.jpg" alt="大橫幅04">
    <img class="img03" src="img\banner_05.jpg" alt="大橫幅05">
</div>

css：設定banner外觀&輪播效果

很久很久以前已經設定過圖片 img03 的基本樣式ㄌ，不用再設定一次

.img03{/*banner*/
    width: 100%;
    height: 450px;
    object-fit: cover;
}

新增重點是剛剛講到我們特別設的兩個div
第一層(裡面的)div用套用.slides，為五張照片排版，讓圖片肩並肩排成一列；

.slides{
    display: flex;
    width: 500%;
    transition: transform 1s ease;
}

特別值得注意今天有個新朋友transition，chatgpt學長是這麼向我們介紹它ㄉ ：

✨ transition 是什麼
它是 CSS3 動畫屬性之一，用來控制 屬性值改變時的過渡效果。
簡單說就是：
👉 沒有 transition → 瞬間變化
👉 有 transition → 漸變過程（平滑過渡）

第二層(外面的)div用.banner，畫出小窗戶，只有在這個窗戶裡才是使用者能看見的範圍

.banner{
    width: 100%;
    height: 450px;
    overflow: hidden;
    position: relative;
}

js：真的動起來！

最後一步也是最關鍵的一步--讓 banner 動起來！
然後我！！怎麼看都看不懂！！

恩...明天再開始認真讀...今天先借抄一下...

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 時間一致
  }
}

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

為了做出1-5頁輪播完會順暢的接回第一頁的效果，我們需要把第一張照片在最後重放一次，變成有六張照片在輪播，所以要回頭更新一些html&css的小地方
html

<div class="slides">
     <img class="img03" src="img\banner_01.jpg" alt="大橫幅01">
     <img class="img03" src="img\banner_02.jpg" alt="大橫幅02">
     <img class="img03" src="img\banner_03.png" alt="大橫幅03">
     <img class="img03" src="img\banner_04.jpg" alt="大橫幅04">
     <img class="img03" src="img\banner_05.jpg" alt="大橫幅05">
     <img class="img03" src="img\banner_01.jpg" alt="重播大橫幅01">
</div>

css

.slides{
    display: flex;
    width: 600%;
    transition: transform 1s ease;
}

折騰老半天終於做出來了...可喜可賀...(✺ω✺)
小murmur一下...IT的發文系統居然不給分享影片和gif，都沒辦法直接展示成品好掃興:(((

但畢竟最大部分還是直接搬現成的，所以有點沒成就感
明天真的會認真來學js，希望能靠自己寫出新功能，今天先收工啦ㄅㄅ～