分析:
- 需求1:小图标鼠标经过事件
- 鼠标经过小图片,当前高亮,其余兄弟变淡 添加类
- 需求2 :大图片跟随变化
- 对应的大图片跟着显示,如果想要过渡效果,可以使用opacity效果,可以利用CSS淡入淡出的效果,还是添加类
- 需求3:右侧按钮播放效果
- 点击右侧按钮,可以自动播放下一张图片
- 需要一个变化量 index 不断自增
- 然后播放下一张图片
- 如果到了最后一张,必须要还原为第1张图片
- 教你一招: 索引号 = 索引号 % 数组长度 (放到播放前面)
- 需求4:解决一个BUG
- 点击右侧按钮可以实现播放下一张,但是鼠标经过前面的,播放就会乱序
- 解决方案: 让变化量(索引号) 重新赋值为 当前鼠标经过的索引号
- 需求5:左侧按钮播放效果
- 点击左侧按钮,可以自动播放上一张图片
- 需要一个变化量 index 不断自减
- 然后播放上一张图片
- 如果到了第一张,必须要从最后一张播放
- 教你一招: 索引号 = (数组长度 + 索引号) % 数组长度
- 需求6:因为左侧按钮和右侧按钮里面有大量相同的操作,可以抽取封装一个函数 common
- 求7:开启定时器
- 其实定时器自动播放,就相当于点击了右侧按钮,此时只需要, right.click()
- 需求8:
- 鼠标经过停止定时器 (清除定时器)
- 鼠标离开开启定时器 (开启定时器)
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QQ音乐轮播图</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } .main { width: 700px; margin: auto; background: #000; } .slides { height: 320px; position: relative; } .slides ul li { /* display: none; */ position: absolute; top: 0; left: 0; opacity: 0; /* 这里实现淡入淡出的关键 */ transition: all .3s; } .slides li.active { /* display: block; */ opacity: 1; } .slides .extra { width: 700px; height: 53px; line-height: 53px; position: absolute; bottom: 0px; background-color: rgba(0, 0, 0, 0.8); z-index: 10; } .slides .extra h3 { width: 82%; margin: 0; margin-right: 20px; padding-left: 20px; color: #98E404; font-size: 28px; float: left; font-weight: 500; font-family: "Microsoft Yahei", Tahoma, Geneva; } .slides .extra a { width: 30px; height: 29px; display: block; float: left; margin-top: 12px; margin-right: 3px; background-image: url(./assets/icon_focus_switch.png); } .slides .extra .prev { background-position: 0 0; } .slides .extra .prev:hover { background-position: -30px 0; } .slides .extra .next { background-position: -60px 0; } .slides .extra .next:hover { background-position: -90px 0; } .indicator { padding: 10px 0; } .indicator ul { list-style-type: none; margin: 0 0 0 4px; padding: 0; overflow: hidden; } .indicator ul li { position: relative; float: left; width: 60px; margin: 0 4px 0 5px; text-align: center; cursor: pointer; } .indicator li img { display: block; border: 0; text-align: center; width: 60px; } .indicator li .mask { width: 60px; height: 60px; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); } .indicator li .border { display: none; width: 54px; position: absolute; bottom: 0; left: 0; z-index: 20; border: 3px solid #98E404; } /* li里面的mask 和 border 刚开始都是显示的 */ /* 我们写一个样式css */ .indicator .active .mask { display: none; } .indicator .active .border { display: block; } </style> </head> <body> <div class="main"> <div class="slides"> <ul> <li class="active"><a href="#"><img src="./assets/b_01.jpg" alt="第1张图的描述信息"></a></li> <li><a href="#"><img src="./assets/b_02.jpg" alt="第2张图的描述信息"></a></li> <li><a href="#"><img src="./assets/b_03.jpg" alt="第3张图的描述信息"></a></li> <li><a href="#"><img src="./assets/b_04.jpg" alt="第4张图的描述信息"></a></li> <li><a href="#"><img src="./assets/b_05.jpg" alt="第5张图的描述信息"></a></li> <li><a href="#"><img src="./assets/b_06.jpg" alt="第6张图的描述信息"></a></li> <li><a href="#"><img src="./assets/b_07.jpg" alt="第7张图的描述信息"></a></li> <li><a href="#"><img src="./assets/b_08.jpg" alt="第8张图的描述信息"></a></li> <li><a href="#"><img src="./assets/b_09.jpg" alt="第9张图的描述信息"></a></li> <li><a href="#"><img src="./assets/b_10.jpg" alt="第9张图的描述信息"></a></li> </ul> <div class="extra"> <h3>第1张图的描述信息</h3> <a class="prev" href="javascript:;"></a> <a class="next" href="javascript:;"></a> </div> </div> <div class="indicator"> <ul> <li class="active"> <img src="assets/s_01.jpg"> <span class="mask"></span> <span class="border"></span> </li> <li> <img src="assets/s_02.jpg"> <span class="mask"></span> <span class="border"></span> </li> <li> <img src="assets/s_03.jpg"> <span class="mask"></span> <span class="border"></span> </li> <li> <img src="assets/s_04.jpg"> <span class="mask"></span> <span class="border"></span> </li> <li> <img src="assets/s_05.jpg"> <span class="mask"></span> <span class="border"></span> </li> <li> <img src="assets/s_06.jpg"> <span class="mask"></span> <span class="border"></span> </li> <li> <img src="assets/s_07.jpg"> <span class="mask"></span> <span class="border"></span> </li> <li> <img src="assets/s_08.jpg"> <span class="mask"></span> <span class="border"></span> </li> <li> <img src="assets/s_09.jpg"> <span class="mask"></span> <span class="border"></span> </li> <li> <img src="assets/s_10.jpg"> <span class="mask"></span> <span class="border"></span> </li> </ul> </div> </div> <script> // mask是遮罩层 // 需求1:小图标鼠标经过事件 鼠标经过小图片,当前高亮,其余兄弟变淡 添加类 // 获取小图li元素 let lis = document.querySelectorAll('.indicator li') // 获取大图li元素 let lists = document.querySelectorAll('.slides ul li') // 获取文字 let text = document.querySelector('h3') // 获取按钮 let left = document.querySelector('.prev') let right = document.querySelector('.next') // 获取大盒子main let main = document.querySelector('.main') // 给多个li绑定事件 for (let i = 0; i < lis.length; i++) { lis[i].addEventListener('mouseenter', function () { // 找出唯一的active,删除类 document.querySelector('.indicator .active').classList.remove('active') // 鼠标经过谁,谁加上active 这个类 this.classList.add('active') // 需求2 :大图片跟随变化 // 对应的大图片跟着显示,如果想要过渡效果,可以使用opacity效果,可以利用CSS淡入淡出的效果,还是添加类 // 选出唯一的那个active,删除类 document.querySelector('.slides ul .active').classList.remove('active') // 对应序号的li,加上active lists[i].classList.add('active') text.innerHTML = `第${i + 1}张图的描述信息` // 需求4:解决一个BUG // 点击右侧按钮可以实现播放下一张,但是鼠标经过前面的,播放就会乱序 // 解决方案: 让变化量(索引号)index 重新赋值为 当前鼠标经过的索引号 // 鼠标经过了哪个li,他的索引号就是 i // 右侧按钮是通过 index 来控制的 // 因为在回调函数里,需要时才会执行。而index是全局变量,所以会先执行 index = i }) } // 需求3:右侧按钮播放效果 // 点击右侧按钮,可以自动播放下一张图片 // 需要一个变化量 index 不断自增 // 然后播放下一张图片 // 如果到了最后一张,必须要还原为第1张图片 // 教你一招: 索引号 = 索引号 % 数组长度 (放到播放前面) let index = 0 //全局变量 信号量 控制器 为了给 右侧按钮和左侧按钮同时使用 right.addEventListener('click', function () { index++ // 选出 index小图片 做操作 先移除类,再增加类 // console.log(index); // if (index === lis.length) { // index = 0 // } index = index % lis.length // 用取余数的方法控制索引号 common() }) // 需求5:左侧按钮播放效果 // 点击左侧按钮,可以自动播放上一张图片 // 需要一个变化量 index 不断自减 // 然后播放上一张图片 // 如果到了第一张,必须要从最后一张播放 // 教你一招: 索引号 = (数组长度 + 索引号) % 数组长度 left.addEventListener('click', function () { index-- // 选出 index小图片 做操作 先移除类,再增加类 // console.log(index); if (index < 0) { index = lis.length - 1 } // index = (lis.length + index) % lis.length common() }) // 需求6:因为左侧按钮和右侧按钮里面有大量相同的操作,可以抽取封装一个函数 common function common() { document.querySelector('.indicator .active').classList.remove('active') lis[index].classList.add('active') // 选出 index大图片 做操作 document.querySelector('.slides ul .active').classList.remove('active') lists[index].classList.add('active') text.innerHTML = `第${index + 1}张图的描述信息` } // 求7:开启定时器 // 其实定时器自动播放,就相当于点击了右侧按钮,此时只需要, right.click() let timer = setInterval(function () { // 自动调用右侧按钮的点击事件 right.click() }, 1000) // 需求8: // 鼠标经过停止定时器 (清除定时器) main.addEventListener('mouseenter', function () { clearInterval(timer) }) // 鼠标离开开启定时器 (开启定时器) main.addEventListener('mouseleave', function() { timer = setInterval(function () { // 自动调用右侧按钮的点击事件 right.click() }, 1000) }) </script> </body> </html>