效果图
完整思路介绍
第一步：完成轮播图事件的添加 ：用一个全局遍历index记录当前需要展示的图片的索引
（1）鼠标移入移出事件：当鼠标移入轮播图时显示左右两边上一页下一页按钮，移出时隐藏
（2）上一页下一页按钮点击事件
点击下一页:index++
点击上一页:index--
（3）页码点击事件
第二步：完成上一页和下一页
（1）点击移动之前给ul添加边界检测：否则点击下一页会无限往右滚动
（2）修改当前索引（自增/自减），索引表示的是当前ul应该展示第几张图片
（3）移动ul（目标距离 = -index * screen的宽度）
（4）页码保持同步（当前显示的是第几张图片，下方页码对应索引高亮）
第三步：完成无限轮播 核心思想：n+1
（1）常规思路：图片滚动时，当滚动到最后一张时，我们偷偷的快速改变ul的位置到第一张（不要动画，瞬间改变）
ul.style.left = '0px';//ul回到初始位置
index = 0;//index恢复到0
（2）问题发现：这种方式可以实现无限轮播，但是在下一轮无限的时候第一张会被跳过去
原因：我们手动改变了index为0，而动画又需要index+1，所以会错过index为0的那一张
（3）解决方案：我们在最后一张图片的后面加上第一张图片（第6张）可以让用户看到滚动效果，然后滚动到第六张时，再改变ul回到初始位置。
好处：（1）用户可以看到滚动效果，不影响体验 （2）刚好第6张与第一张是同一张图片，快速改变位置不会造成动画的闪现
(4)当图片index为最后一张的的时候，页码应该显示第一个
因为最后一张图片第一张是同一张图片
第四步：自动无限轮播
功能原理介绍：相当于每隔一段时间自动点击下一页按钮，代码逻辑完全不变
思路分析：
（1）将轮播代码封装成一个函数
（2）开启定时器，每隔一段时间执行这个函数
（3）鼠标移入时清除定时器，移出时开启定时器
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./animate.js"></script> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; overflow: hidden; position: relative; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 3000px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: yellow; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style> </head> <body> <div class="all" id='box'> <div class="screen"> <ul> <li><img src="./images/laugh01.gif" width="500" height="200" /></li> <li><img src="./images/laugh02.gif" width="500" height="200" /></li> <li><img src="./images/laugh03.gif" width="500" height="200" /></li> <li><img src="./images/laugh04.gif" width="500" height="200" /></li> <li><img src="./images/laugh05.gif" width="500" height="200" /></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> <script> let box = document.getElementById('box'); let screen = document.querySelector('.screen'); let ul = document.querySelector('ul'); let ol = document.querySelector('ol'); let arr = document.getElementById('arr'); let left = document.getElementById('left'); let right = document.getElementById('right'); // 无缝轮播：思路分析 // 在最后面添加第一张图片 // * 静态添加：复制第一个li放到最后 let li1 = ul.firstElementChild.cloneNode(true); ul.appendChild(li1); let olli = document.querySelectorAll('ol>li'); // console.log(olli); // console.log(li1); // console.log(box, screen, ul, ol); // 首先鼠标移入left，right的时候就取消隐藏 box.onmouseover = function () { arr.style.display = 'block'; }; box.onmouseout = function () { arr.style.display = ''; }; // 需要定义一个全局变量indexof let index = 0; // 当鼠标点击left向左的时候 ul下面的li就开始向左边移动-500 因为每张图的大小的500 right.onclick = rightGo; function rightGo() { // 然后需要进行滚动 index++; // 判断 if (index == ul.children.length) { // * 动态添加：克隆第一个li，追加到ul到最后 // * 修改左右逻辑：index的取值变化，增加瞬移实现视觉差 ul.style.left = 0 + 'px'; index = 1; }; animate(ul, -index * screen.offsetWidth, 'left'); for (let i = 0; i < olli.length; i++) { // 判断当i等于0的时候 ol下面的li等于1 console.log(i, olli); if (i == index) { olli[i].classList.add('current'); } else { olli[i].classList.remove('current'); }; if (index == ul.children.length - 1) { olli[0].classList.add('current'); }; }; }; left.onclick = leftGo; function leftGo() { // 然后需要进行滚动 index--; // 判断 if (index < 0) { index = ul.children.length - 2; ul.style.left = -(index + 1) * screen.offsetWidth + 'px'; }; animate(ul, -index * screen.offsetWidth, 'left'); for (let i = 0; i < olli.length; i++) { // 判断当i等于0的时候 ol下面的li等于1 console.log(i, olli); if (i == index) { olli[i].classList.add('current'); } else { olli[i].classList.remove('current'); }; if (index == ul.children.length - 1) { olli[0].classList.add('current'); }; }; }; // // 需求：自动轮播 /* 思路分析：自动轮播的本质：让rightGo自动运行 1. 增加一个定时器：回调rightGo,2000（时间必须覆盖掉动画事件） 2. 鼠标移入应该暂停：清除定时器 3. 鼠标移出应该重启定时器 */ // 思路分析：自动轮播的本质：让rightGo自动运行 // 1. 增加一个定时器：回调rightGo,2000（时间必须覆盖掉动画事件） let z = setInterval(function () { rightGo() }, 1000); // 2. 鼠标移入应该暂停：清除定时器 box.onmouseover = function () { clearInterval(z); }; // 3. 鼠标移出应该重启定时器 box.onmouseout = function () { z = setInterval(function () { rightGo() }, 1000); }; </script> </body> </html>
致读者 ：
明天进入js进阶的复习中。
