布局和js的轮播图

一.   浮动与定位

浮动:float: left | right

定位:position:relative | absolute | fixed

1.浮动与相对定位结合使用

/*盒子采用的是浮动布局为主, 相对定位可以辅助其子级绝对定位布局, 也可以在浮动布局基础上微调 */

采用相对定位布局, 在浮动布局基础上微调, 不影响兄弟盒子的布局

采用盒模型布局, 在浮动布局基础上微调, 影响兄弟盒子的布局

2.浮动与绝对定位结合使用

盒子采用绝对定位布局, 浮动布局失效

为什么: 因为两者都是脱离文档流, 绝对定位为完全脱离文档流

脱离文档流: 盒子的宽度可以由内容撑开

二.   Js  更改活跃状态

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逻辑代码块可以通过匿名函数的自调用完成局部作用域

(function(){

    let a = 10;

})()

(function(){

    let a = 20;

})() 

页面的结构问题(结构的搭建很重要)

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;

    }

}

三.   轮播图

// 下一张

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 记录了当前活跃状态的索引, 且所有逻辑共有

// 无限录播时考虑索引边界切换的问题