又从头到尾把轮播图研究了一遍，感觉理解更深刻了。
就怕自己搞不懂，分析了各个步骤的思路，为啥用，怎么用。
总算搞清楚了。
话不多说，干货奉上.
效果图：
//1，左右按钮初始隐藏 鼠标进入box 按钮显示 鼠标离开box 按钮隐藏 //获取元素 var box = document.getElementById('box'); var leftbtn = document.getElementById('leftbtn'); var rigbtn = document.getElementById('rigbtn'); //因为图片宽度是多个事件需要用到 所以要定义为全局变量 var pic_width = box.clientWidth; //注册事件 box.addEventListener('mouseenter', function() { leftbtn.style.display = 'block'; rigbtn.style.display = 'block'; //清除定时器 停止自动播放 clearInterval(timer); //停止播放后 清空定时器变量 提升运行效率 timer = null; }); box.addEventListener('mouseleave', function() { leftbtn.style.display = 'none'; rigbtn.style.display = 'none'; //timer在11条里声明过了 这里就不需要再加var进行声明了 timer = setInterval(function() { rigbtn.click(); }, 1500); }); //6，创建动画函数animate 点击小圆点 图片会移动 //因为图片需要缓慢移动到目标位置 而不是瞬移 所以需要让动画函数带缓动效果 function animate(obj, target, callback) { //obj是移动的对象 target是移动的目标位置 callback是回调函数 clearInterval(obj.timer); //创建缓动函数 缓动的核心思想就是把移动到目标位置的距离分成若干小步 //一定时间内走一小步，让这个距离在若干时间完成若干小步后走完 function move() { //定义每一小步走的距离 把一次移动到目标位置的距离分为10份 //每一份就是一个step var step = (target - obj.offsetLeft) / 10; //step可能不是整数 导致最终移动距离有误差 //所以要把每一步的step变成整数 //如果step是正数 就取大于step的最小整数 //如果step是负数 就取小于step的最大整数 用Math()的知识 /*if(step > 0) { step = Math.ceil(step);//向上取整 } else { step = Math.floor(step);//向下取整 }*/ //可以将上面的if else语句简化为三元运算符 step = step > 0 ? Math.ceil(step) : Math.floor(step); //如果走到了目标位置 就清除定时器 if(obj.offsetLeft == target) { clearInterval(obj.timer); //因为回调函数是定时器结束后再调用函数 //所以这里清除定时器后 需要判断一下是否有回调函数 有就调用 没有就不调用 /*if(callback) { callback(); }*/ //上面的判断语句可以简化为 callback&&callback(); } //把每一小步移动的距离和offsetLeft之和，给obj的left值 //注意，这里obj.style.left对应的是数值+像素单位，一定不要忘了+'px' obj.style.left = obj.offsetLeft + step + 'px'; } //给obj创建专属的定时器 //用定时器实现一定时间走一小步的结果 这里是40毫秒移动一个step的距离 //注意，专属定时器不需要用var了 obj.timer = setInterval(move, 40); } //2，动态添加小圆点 图片的数量就是小圆点的个数 //获取元素 var ul01 = document.getElementById('ul01'); var ul02 = document.getElementById('ul02'); //添加多个li 用for循环 for(var i = 0; i < ul01.children.length; i++) { //创建元素creLi var creLi = document.createElement('li'); //3，创建自定义属性data-index 用来获取小圆点的索引号 creLi.setAttribute('data-index', i); //添加元素 ul02.appendChild(creLi); //4,当前点击的小圆点 颜色发生变化 创建类urrent //因为图片默认开始显示第一张 所以先让第一个小圆点小时current类 ul02.children[0].className = 'current'; //5，给小圆点创建点击事件 点击小圆点 当前点击的小圆点变色 //用排他思想 for循环 //注册点击事件 creLi.addEventListener('click', function() { //干掉所有人 for(var i = 0; i < ul02.children.length; i++) { ul02.children[i].className = ''; } //留下我自己 this.className = 'current'; //7，点击小圆点 图片跟着动 调用动画函数 //分析 点击圆点1 图片向左移动0个图片的宽度box.clientWidth //点击圆点2 图片向左移动1个图片的宽度 以此类推 //图片移动的距离 就是 当前被点击圆点的索引号乘以图片的宽度 //获取自定义属性 当前被点击的小圆点的索引号 var index = this.getAttribute('data-index'); num = index; circle = index; animate(ul01, -index*pic_width); }); } //8，右侧按钮 //8.1 点击右侧按钮 图片向左移动 //点击1次 图片向左移动1个图片宽度 显示图片2 //点击2次 向左移动2个图片宽度 显示图片3 以此类推 //当显示到第3张图片即最后一张图片时 再点击右侧按钮 会显示空白 //重点： 实现无缝链接，即当显示到最后一张图片时 再点击右侧按钮 会显示图片1 //怎么做 在图片3后面克隆一张图片1 //显示图片3时 再点击按钮 ul01继续向左移动 显示图片1 //然后迅速跳转到跳转到图片1 让ul01.style.left归零 //设置次数变量num var num = 0; //克隆图片1 先克隆 再添加 注意 克隆图片也是全局事件 不是局部的 var liCopy = ul01.children[0].cloneNode(true)//深克隆 ul01.appendChild(liCopy);//添加新的li后，注意取css里修改ul01的宽度 //console.log(ul01.children.length); 元素个数变成了4 //获取元素rigbtn var rigbtn = document.getElementById('rigbtn'); //给按钮点击事件安装节流阀 var flag = true; //左右按钮都要用 所以设置全局变量 //注册点击事件 rigbtn.addEventListener('click', function() { if(flag) { //初始状态 先把节流阀关了 让自动播放的图片播放完一张图片前 点击按钮无效 flag = false; //先做个判断 //点击第2次的时候 显示图片3 再点击 就显示克隆的图片1 //这时候 让ul01位置归零 让num的值归零以便从头开始 if(num == ul01.children.length - 1) { ul01.style.left = 0; num = 0; } //点击1次 移动距离就是1*pic_width //点击1次 让num自增1 num++; //注意 这里如果先自增 再做判断 //会出现一个bug 就是当再次显示图片1时 点击无效 重新点击才会显示图片2 //因为点击第三次时 本来应该跳转到图片1的 结果num被归零了 再点击还是显示图片1 //调用动画函数 animate(ul01, -num*pic_width, function() { //function(){}是回调函数 //动画结束一个动作后 即播放完该图片后 再回头打开节流阀 让下一次点击生效 flag = true; }); circle++; if(circle == ul02.children.length) { circle = 0; } //因为这段排他思想的小圆点代码重复使用 所以可以封装成一个函数进行调用 /*for(var i = 0; i < ul02.children.length; i++) { ul02.children[i].className = ''; } ul02.children[circle].className = 'current';*/ cir(); } }); function cir() { for(var i = 0; i < ul02.children.length; i++) { ul02.children[i].className = ''; } ul02.children[circle].className = 'current'; } //9，点击按钮 图片移动 小圆点跟着移动 点击小圆点 图片跟着移动 num次数也变化 //让图片 小圆点 按钮次数 一起变化的核心 就是图片动 num变化 小圆点当前的current类发生变化 //即 图片移动 当前小圆点变色 点击按钮 当前小圆点变色 //当前小圆点变色 图片移动 按钮次数发生变化 num index 图片距离 一起变化 //但是index是局部变量 怎么让三者绑定呢 //就要重新创建一个全局变量 代替index 作为小圆点当前的索引号 让三者绑定 var circle = 0; //10，点击左侧按钮 //和右侧按钮点击事件的代码基本相同 但是方向相反 需要修改一些数据 //直接把右侧按钮点击事件的代码复制过来 然后修改数据 //获取元素leftbtn var leftbtn = document.getElementById('leftbtn'); //注册点击事件 leftbtn.addEventListener('click', function() { //同理，给左侧按钮也加个节流阀 if(flag) { flag = false; //先做个判断 //开始时 未点击 num为0 if(num == 0) { num = ul01.children.length-1; ul01.style.left = -num*pic_width + 'px'; } //点击左侧按钮时 num自减 num--; animate(ul01, -num*pic_width, function() { flag = true; }); circle--; if(circle < 0) { circle = ul02.children.length - 1; } //因为这段排他思想的小圆点代码重复使用 所以可以封装成一个函数进行调用 /*for(var i = 0; i < ul02.children.length; i++) { ul02.children[i].className = ''; } ul02.children[circle].className = 'current';*/ cir(); } }); //11，图片自动播放 相当于每隔一定时间 用定时器调用点击右侧按钮的时间 var timer = setInterval(function() { rigbtn.click(); }, 1500); //12，鼠标进入box 停止自动播放 鼠标离开box 继续自动播放 //13，节流阀 控制图片播放的频率 //当前 快速点击按钮 图片高速播放 timer定时器还没执行结束 就开始播放下一张图片了 //用flag控制 flag为true 打开节流阀 启用定时器 播放图片 //flag为false 关闭节流阀 关闭的定时器 点击按钮无效 停止播放图片 //给按钮点击事件安装节流阀
精彩专题分享：