轮播图
业务需求
- 手动轮播
- 单击下方的缩略图
- 当前被单击的缩略图高亮
- 文本描述需要动态变化
- 让大图相应的变化
- 上一张和下一张
- 自动轮播
手动轮播
元素的获取
-
缩略图--标记，我们要为其添加单击事件
-
文本描述信息：单击之后要修改文字描述信息
-
大图：单击之后要切换大图的显示
// 获取元素 // - 缩略图--标记，我们要为其添加单击事件 let indicators = document.querySelectorAll('.indicator li') // - 文本描述信息：单击之后要修改文字描述信息 let desc = document.querySelector('.extra > h3') // - 大图：单击之后要切换大图的显示 let slides = document.querySelectorAll('.slides li') // 下一张按钮 let next = document.querySelector('.extra > .next') // 上一张按钮 let prev = document.querySelector('.extra > .prev') // 获取整个轮播图区域 let main = document.querySelector('.main')
为元素绑定事件实现手动轮播
// 为缩略图绑定单击事件：由于获取到的是伪数组，所以需要遍历，为每一个元素绑定事件
indicators.forEach(function(ele, index) {
// 绑定事件
ele.addEventListener('click', function() {
// 1.让当前被单击的缩略图，添加高亮样式--样式类名操作
// 1.1 找到缩略图中有active样式的元素，将其active样式移除
document.querySelector('.indicator .active').classList.remove('active')
// 为当前被单击的缩略图元素添加active样式
ele.classList.add('active')
// 2.修改文本描述信息
desc.innerText = `第${index + 1}张图的描述信息`
// 3.显示对应的大图
// 3.1 之前有active样式的大图元素，移除active样式
document.querySelector('.slides .active').classList.remove('active')
// 3.2 为对应索引位置的大图添加active样式
slides[index].classList.add('active')
})
})
下一张
可以定义一个全局的索引，单击下一张的时候，让索引加1，调用索引位置的li元素的click事件
为了实现循环轮播，我们需要判断索引是否越界，如果越界，则让索引重置到0
// 下一张
next.addEventListener('click', function() {
// 让索引+1
index++
// 判断索引是否越界
if (index > indicators.length - 1) {
index = 0
}
// 调用索引位置的li元素的click单击事件
indicators[index].click()
})
上一张
prev.addEventListener('click', function() {
index--
// 判断索引是否越界
if (index < 0) {
index = indicators.length - 1
}
// 调用索引位置的li元素的click单击事件
indicators[index].click()
})
细节
我们发现，现在如果先单击某个缩略图，再单击上一张和下一张，索引位置出现异常
原因是：我们单击缩略图并没有更新当前正确的索引位置，索引还是从0开始
// 为缩略图绑定单击事件：由于获取到的是伪数组，所以需要遍历，为每一个元素绑定事件
indicators.forEach(function(ele, i) {
// 绑定事件
ele.addEventListener('click', function() {
..........
// 3.3 重置全局的索引
index = i
})
})
自动轮播
定时器的添加和停止
自动轮播的本质是手动轮播，实现方式就是在定时器间隔指定的时间，调用 “下一张” 按钮的单击事件
// 自动轮播
// 自动轮播的本质是手动轮播，实现方式就是在定时器间隔指定的时间，调用 “下一张” 按钮的单击事件
// 添加定时器 自动轮播的本质就是手动轮播,相当于点击了下一张按钮
let timeId //注意作用域问题
function time() {
timeId = setInterval(function () {
next.click()
}, 1000)
}
time()
// 鼠标经过轮播图时,停止定时器
main.addEventListener('mouseenter', function () {
clearInterval(timeId)
})
// 鼠标离开轮播图时,重启定时器
main.addEventListener('mouseleave', function () {
time()
})
