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

和各位分享一件全台灣舉國不震驚的消息，是ㄉ，挖搭西挖，已經完完全全進入怠惰模式了～
不想寫作業～不想發文～不想玩了ㄚㄚㄚㄚㄚㄚㄚㄚ～

但為了完賽剩下十天我還是會繼續寫下去ㄉ，而且轉念一想，我定的標題叫做「coding小白盜版學校官網ㄉ30天挑戰日記」，又不是「coding小白盜版學校官網ㄉ30天純手工雕刻日記」，現在AI工具那麼厲害，就算請chatgpt幫我寫只要套上去會動、有還原也是有切題的吧！這個時代練習用AI工具也算一種學習阿！

那麼今天就是正式擺爛化的第一天咯ξ( ✿＞◡❛)
擺爛化的第一天我們的進度是～

為banner補上左右控制箭頭～

首先第一步要先在html裡加上之前沒放的兩位箭頭
HTML

<div class="banner">
    <div class="slides01">
        <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>
    <div>
        <img class="img07 arrow03" src="img\icon_arrowl_white.png" alt="白色箭頭向左">
        <img class="img07 arrow04" src="img\icon_arrowr_white.png" alt="白色箭頭向右">
    </div>
</div>

當初會忽略沒放是因為我還不知道怎麼讓icon疊在banner圖片上
但自從為了做下拉式選單學到position: absolute;這個問題已經難不倒我ㄌ
CSS

.arrow03{
    display: flex;
    position: absolute;
    top: 50%;
    left: 1rem;
}
.arrow04{
    display: flex;
    position: absolute;
    right: 1rem;
    top: 50%;
}
.img07{
    width: 23px;
    height: 36px;
    object-fit: cover;
    cursor: pointer;
}

再來最後一步，也是壓爛我玻璃心的最後一根稻草--JS!
其實我原本還是有試著把之前寫的內容微調，但最後顯然沒成功ㄋ

…阿你說了一堆我也聽不懂啦

歷經一番挫折最後進入自暴自棄模式，直接開始指使chatgpt學長

幫我把你這個修正版加上我原本就有的自動輪播，整理後一併給我--
const slides01 = document.querySelector(".slides01"); // 找到slides容器
const totalImages01 = 6; // 5 張真實 + 1 張複製
...

然後三秒鐘過去ㄌ，就這麼輕輕鬆鬆的完成了ㄋ，有些事果然還是要交給專業的去做

以上就是今天的分享，明天繼續奴役人工智慧，大家明天見ㄅㄅ:)