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

早上出門突然感覺風一夜之間變成涼的，果然中秋節過後真的就要進入到秋天了ㄋ。
今天沒什麼特別的目標，想到什麼就做什麼，做了蠻多瑣碎的事

先是看到昨天設定分頁的JS，一大坨真的占空間，所以讓chatgpt用迴圈幫忙簡化一下。
不得不說迴圈真是個好東西，從原本這樣一大串

const list01 =document.querySelector(".list01")
const list02 =document.querySelector(".list02")
const list03 =document.querySelector(".list03")
const list04 =document.querySelector(".list04")
const list05 =document.querySelector(".list05")
const list06 =document.querySelector(".list06")

const info01 =document.querySelectorAll(".info01")
const info02 =document.querySelectorAll(".info02")
const info03 =document.querySelectorAll(".info03")
const info04 =document.querySelectorAll(".info04")
const info05 =document.querySelectorAll(".info05")
const info06 =document.querySelectorAll(".info06")

info01.forEach(btn => {
  btn.addEventListener("click",function(){
    list01.style.display = "flex";
    list06.style.display = "none";
    list05.style.display = "none";
    list02.style.display = "none";
    list03.style.display = "none";
    list04.style.display = "none";
  });
})
info02.forEach(btn => {
  btn.addEventListener("click",function(){
    list02.style.display = "flex";
    list06.style.display = "none";
    list05.style.display = "none";
    list01.style.display = "none";
    list03.style.display = "none";
    list04.style.display = "none";
  });
})
info03.forEach(btn => {
  btn.addEventListener("click",function(){
    list03.style.display = "flex";
    list06.style.display = "none";
    list05.style.display = "none";
    list02.style.display = "none";
    list01.style.display = "none";
    list04.style.display = "none";
  });
})
info04.forEach(btn => {
  btn.addEventListener("click",function(){
    list04.style.display = "flex";
    list06.style.display = "none";
    list05.style.display = "none";
    list03.style.display = "none";
    list02.style.display = "none";
    list01.style.display = "none";
  });
})
info05.forEach(btn => {
  btn.addEventListener("click",function(){
    list05.style.display = "flex";
    list06.style.display = "none";
    list04.style.display = "none";
    list03.style.display = "none";
    list02.style.display = "none";
    list01.style.display = "none";
  });
})
info06.forEach(btn => {
  btn.addEventListener("click",function(){
    list06.style.display = "flex";
    list05.style.display = "none";
    list04.style.display = "none";
    list03.style.display = "none";
    list02.style.display = "none";
    list01.style.display = "none";
  });
})

一下就剩一小搓ㄌ

const lists = Array.from({ length: 6 }, (_, i) => document.querySelector(`.list0${i + 1}`));

for (let i = 1; i <= 6; i++) {
  const infos = document.querySelectorAll(`.info0${i}`);
  infos.forEach(btn => {
    btn.addEventListener("click", function () {
      // 先全部隱藏
      lists.forEach(list => list.style.display = "none");
      // 只顯示被點擊的那一個
      lists[i - 1].style.display = "flex";
    });
  });
}

再來發現之前做好的YT影片小視窗不會自動輪播了，問gpt怎麼一回事

…原來只是不小心刪掉了幾行啊，補回去輕輕鬆鬆~

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

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

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 時間一致
    }
}
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)`;
    }
}
setInterval(nextSlide, intervalTime);
arrow01.addEventListener("click", prevSlide);
arrow02.addEventListener("click", nextSlide);

最後發現學校的網站滑鼠懸浮在nav文字上的時候，都會出現手指頭符號&白底黑字ㄉ備註，決定來學一下~~(手指頭截圖截不下來尷尬ㄌ

手指頭效果其實很簡單，只要在css加上cursor: pointer;就可以了

.nav02-2{/*主要nav文字*/
    display: flex;
    align-items: center;
    cursor: pointer;
}

至於備註就是在a標籤裡面加個title=""，打上喜歡的字

<ul class="nav-drop font13" type="none">
                    <li><a href="#" title="不知道不要問我">歷任校長</a></li>
                    <li><a href="#">北教大簡介</a></li>
                    <li><a href="#">學校願景</a></li>
                    <li><a href="#">組織規章</a></li>
                    <li><a href="#">校園風光</a></li>
                    <li><a href="#">交通指引</a></li>
                    <li><a href="#">校園地圖</a></li>
                    <li><a href="#">360VR全景</a></li>
                    <li class="no-border"><a href="#">附小</a></li>
                </ul>

薑薑完美

以上就是今天的進度，真是平靜祥和的一天
大家明天見ㄅㄅ~