web APIs练习（JavaScript）—— 轮播图
🎯第一幕： 随机轮播图
📊效果展示
需求🔎：当我们刷新页面，页面中的轮播图会显示不同图片以及样式
分析📝：
①：准备一个数组对象，里面包含详细信息（素材包含）
②：随机选择一个数字，选出数组对应的对象，更换图片，底部盒子背景颜色，以及文字内容
③：利用这个随机数字，让小圆点添加高亮的类（addClass） 利用 css 结构伪类选择器
代码
// 1. 初始数据
const sliderData = [...]
//1. 创建随机数
const random = parseInt(Math.random()* sliderData.length)
//2. 把对应数据渲染到标签里
//2.1 获取图片元素
const img = document.querySelector('.slider-wrapper img')
//2.2 修改图片路径 对象.url
img.src = sliderData[random].url
//3. 更换标签里的数字
const p = document.querySelector('.slider-footer p')
p.innerHTML = sliderData[random].title
//更换背景颜色
const footer = document.querySelector('.slider-footer')
footer.style.backgroundColor = sliderData[random].color
//切换小圆点
const li = document.querySelector(`.slider-indicator li:nth-child(${random+1})`)
//li.classList.remove('active')
li.classList.add('active')
🖍️知识点
1. 获取DOM对象📍
①：querySelector --- 只能选择一个元素， 可以直接操作
②：querySelectorAll --- 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素
2. 通过classList属性控制样式📍
①：添加类：add / 删除类：remove / 切换类：toggle
3. 操作元素常用属性📍 //href、title、src
①：语法： 对象.属性 = 值 （图片.src = 图片随机路径）
4. 通过 classList 操作类控制📍
①：语法： 元素.classList.add（’类名‘） / 元素.classList.remove（’类名‘） / 元素.classList.loggle（’类名‘）
.
🎯第二幕：定时器轮播图
📊效果展示
需求🔎：每隔一秒钟切换一个图片
思路📝：
①： 准备一个数组对象，里面包含详细信息
②： 获取元素
③： 设置定时器函数，设置一个变量++，找到变量对应的对象，更改图片、文字信息，激活小圆点：移除上一个高亮的类名，当前变量对应的小圆点添加类
④：处理图片自动复原从头播放（放到变量++后面，紧挨），如果图片播放到最后一张， 就是大于等于数组的长度，则把变量重置为0
代码
// 1. 初始数据
const sliderData = [...]
//1.获取元素
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
let i = 0
//2.开定时器
setInterval(function(){
i++
if(i >= sliderData.length){
i=0
}
//2.1 更换图片路径
img.src = sliderData[i].url
//2.2 把字写到里
p.innerHTML = sliderData[i].title
//2.3 切换小圆点 (排他思想 先删除后添加)
document.querySelector('.slider-indicator .active').classList.remove('active')
document.querySelector(`.slider-indicator li:nth-child(${ i+1 })`).classList.add('active')
},500)
🖍️知识点
1. 操作元素内容📍
①：元素.innerText 属性 --- 只识别文本，不能解析标签
②： 元素.innerHTML 属性 --- 能识别文本，能够解析标签
2. 操作元素内容📍
①：setInterval (函数，间隔时间）
②： 关闭定时器 --- let 变量名 = setInterval (function() { clearInterval（变量名）}
.
🎯第三幕：轮播图完整版
📊效果展示
需求🔎：优化程序，当点击左右的按钮，可以切换轮播图
思路📝：
①： 右侧按钮点击，变量++，如果大于等于8，则复原0
②： 左侧按钮点击，变量--，如果小于0，则复原最后一张
③： 鼠标经过暂停定时器
④： 鼠标离开开启定时器
代码
// 1. 初始数据
const sliderData = [...]
//1.获取元素
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const footer = document.querySelector('.slider-footer')
//2. 右按钮业务
//2.1 获取右按钮
const next =document.querySelector('.next')
let i = 0 //信号量 控制播放图片张数
//2.2 注册点击事件
next.addEventListener('click',function(){
i++ //得到对应对象
if(i >= sliderData.length){ //2.6 如果大于圆点长度，返回0
i=0
}
//2.4 渲染对应数据
img.src = sliderData[i].url
p.innerHTML = sliderData[i].title
footer.style.backgroundColor = sliderData[i].color
//2.5 切换小圆点 (排他思想 先删除后添加)
document.querySelector('.slider-indicator .active').classList.remove('active')
document.querySelector(`.slider-indicator li:nth-child(${ i+1 })`).classList.add('active')
},500)
//3. 右按钮业务
//3.1 获取右按钮
const prev =document.querySelector('.prev')
prev.addEventListener('click',function(){
i-- //得到对应对象
if(i
🖍️知识点
1. 事件监听（绑定）📍
①：addEventListener（‘事件类型’，要执行的函数）
2. 鼠标经过事件📍
①：mouseenter 鼠标经过
②： mouseleave 鼠标离开
③：click 鼠标点击
3. 获取事件对象📍
①：元素.addEventListener（‘click'，function（e） { }
.
💻初始代码
轮播图点击切换
* {
box-sizing: border-box;
}
.slider {
width: 560px;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
width: 100%;
height: 320px;
}
.slider-wrapper img {
width: 100%;
height: 100%;
display: block;
}
.slider-footer {
height: 80px;
background-color: rgb(100, 67, 68);
padding: 12px 12px 0 12px;
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.slider-footer .toggle button:hover {
background: rgba(255, 255, 255, 0.2);
}
.slider-footer p {
margin: 0;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
对人类来说会不会太超前了？
还没有评论，来说两句吧...