1.浮動與定位結合使用

浮動與相當定位

// 1.兩者均參與佈局
// 2.主浮動佈局, 相對佈局輔助完成佈局微調
// 3.相對定位佈局微調不同於盒模型佈局微調, 相對定位佈局不影響盒子原有位置, 就不會影響兄弟盒子佈局

浮動與絕對定位

// 1.只保留絕對定位佈局
// 2.脫離文件流的盒子寬可以交於內容撐開

2.更新資料案列

預設活躍狀態

// 1.將初始的li設定一個active類名(擁有該類名就擁活躍狀態表現的屬性)

更改活躍狀態

let active_index = 0;  // 活躍狀態的索引
for (let i = 0; i < lis.length; i++) {
    lis[i].onmouseover 
 
= function () {
        // 清除之前活躍的
        lis[active_index].className = "";
        // 設定自身為活躍
        this.className = "active";
        // 更新活躍索引
        active_index = i;
    }
}

作用域（不同的js邏輯程式碼塊）

// 不要去使用全域性變數, 不同的js邏輯程式碼塊如果重複命名, 要麼報重新命名錯誤, 要麼資料覆蓋出現變數汙染
// 每一個js邏輯程式碼塊可以通過匿名函式的自呼叫完成區域性作用域
(function(){
    let a 
 
= 10;
})()
(function(){
    let a = 20;
})()

根據資料與頁面結構，動態渲染資料

<ul class="main">
    <li>
        <a href="javascript:void(0)">
            <h2>隨便找的一張圖片</h2>
            <img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
            <p>這是一張圖片</p>
        </a>
    </li>
    ...
 
</ul>

let data = [
        [
            {
                title: "熱門1",
                img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
                info: "這是熱門"
            },
            ...還有三個{}
        ], 
        ...還有三個[]
    ];

let main_lis = document.querySelectorAll('.main li');
// 分析資料結構與頁面結構,將指定資料渲染到指定位置
function updateData(index) {
    let dataArr = data[index];
    for (let i = 0; i < dataArr.length; i++) {
        let h2 = main_lis[i].querySelector('h2');
        h2.innerText = dataArr[i].title;
        let img = main_lis[i].querySelector('img');
        img.setAttribute('src', dataArr[i].img_url);
        let p = main_lis[i].querySelector('p');
        p.innerText = dataArr[i].info;
    }
}

3.輪播圖分析

// 下一張
right_btn.onclick = function () {
    // 清除之前活躍的圖片和tag
    img_lis[active_index].className = "";
    tag_lis[active_index].className = "";

    // 索引切換(更新活躍索引)
    // 安全性: 最後一張的下一張應該是第一張
    if (active_index == 4) active_index = -1;
    active_index++;

    // 設定將要活躍的圖片和tag
    img_lis[active_index].className = "active";
    tag_lis[active_index].className = "active";
};
// active_index 記錄了當前活躍狀態的索引, 且所有邏輯共有
// 無限錄播時考慮索引邊界切換的問題