第六十八天 js轮播图

Posted Charles

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第六十八天 js轮播图相关的知识,希望对你有一定的参考价值。

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(){
        // 清除之前活跃的
        list[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="jacascript:void(0)">
            <h2>小米音响</>
            <img src="https://li.mifile.cn/a4/cf6660a3-d424-4248-889f-0eedle99a342" 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 = "";

    // 索引切换(更新活跃索引)
    // 安全性:最后一张的下一张应该his第一张
    if (active_index == 4) active_index = -1;
    active_index++;

    // 设置将要活跃的图片和tag
    img_lis[active_index].className = "active";
    tag_lis[active_index].className = "active";
};
// active_index 记录了当前活跃状态的索引,且所有逻辑共有
// 无限录播是考虑边界切换的问题

 

以上是关于第六十八天 js轮播图的主要内容,如果未能解决你的问题,请参考以下文章

孤荷凌寒自学python第六十八天学习并实践beautifulsoup模块1

python学习第六十八天:数据库相关操作

python第六十八天--第十二周作业

第六十八节,htnl全局属性和其他属性

第六十八篇OC_按照某一字段对数值进行排序

Android Studio 第六十八期 - Android8.0 进程保活