js基础高级3

// 1.两者均参与布局// 2.主浮动布局, 相对布局辅助完成布局微调// 3.相对定位布局微调不同于盒模型布局微调, 相对定位布局不影响盒子原有位置, 就不会影响兄弟盒子布局

// 1.只保留绝对定位布局// 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逻辑代码块可以通过匿名函数的自调用完成局部作用域(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" > ???????????<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; ???}}

// 下一张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 记录了当前活跃状态的索引, 且所有逻辑共有// 无限录播时考虑索引边界切换的问题