JS轮播图（焦点图）最详细解析，（思路是什么，每一步要怎么做，为啥要这么做，需要注意什么，bug怎么处理，附hmtl、css、js代码和详解） |
您所在的位置：网站首页 › 轮播图csdn › JS轮播图（焦点图）最详细解析，（思路是什么，每一步要怎么做，为啥要这么做，需要注意什么，bug怎么处理，附hmtl、css、js代码和详解） |
JS轮播图（焦点图）最详细解析，（思路是什么，每一步要怎么做，为啥要这么做，需要注意什么，bug怎么处理，附hmtl、css、js代码和详解）
|
棒棒糖要原味的~~分享实用干货，让理论简单化。 这两天挤时间仔细做了轮播图效果。并且刚刚搞了个制作动图的小工具，刚好试用一下，来看看效果→_→
读前说明： 1，为了方法简化 效果直观，也为了方便读者把代码复制到自己电脑上直接就能用 就能体验，我这次写的只是一个模板，没有添加图片，而且给盒子都加了边框，ul故意做小尺寸，动起来更容易观察（但是动图里面有点瑕疵，就是仔细看看图片左侧和大盒子左边框中间是不是留了条缝隙？？？实操中，边框不要，然后在最后检查步骤中要修改正确，我这里只是为了效果的体验和读者深入理解，别跟我学坏orz~）。 2，增加了自己的思考和解读 3，不同思路的分享 4，我是全新选手，刚学了没几天，如果有写的不对的地方，欢迎各位大佬批评指正orz（如果说学的快，纯粹是因为肝，哈哈哈哈 （轮播图）正文开始： 一，思路是什么 我个人认为，学习的重点就是思路的学习，代码只是实现最终结果的一个工具。简单说，思路就是怎么做，为啥这么做。 左右按钮是隐藏的。鼠标进入盒子，左右按钮显示；鼠标离开盒子，左右按钮隐藏。小圆点个数是和图片数量一致的。有多少张图片，就有多少个小圆点。所以为了后期更好维护，这里的小圆点用添加元素的方式实现，而不是直接手动在ul里面放小圆点。点击小圆点，图片移动（这里的图片是用li的背景颜色显示的，我在这里为了简化，没有添加图片）。 图片移动，就需要用到animate动画效果。为了让图片一张张滑动，而不是直接瞬移，需要对animate做些缓动效果（请查看另一篇缓动效果博客，里面有代码和解释）点击左右按钮，图片移动。当图片显示到最后一张，点击右侧按钮，怎么把第一张图片显示出来呢？ 当图片显示到第一张，点击左侧按钮，怎么把最后一张图片显示出来呢？图片移动，小圆点跟着动。注意，这里图片、小圆点和按钮，有一方动起来，其他两方都是跟着动的，所以这里需要对三方进行绑定。图片自动播放，从左往右。是不是很像一直在点击右侧按钮呢？当我快速点击按钮时，图片飞速移动，怎么能让图片在点击的情况下，还能用正常速度播放呢？检查。是否有bug，代码是否有重复，是否可以缩减代码。 二，每一步要怎么做（实操环节） 用代码说话（建议把代码复制到自己电脑上，看一下实际效果是怎么样的，方便在后续更清楚的了解到js代码里面的元素都是谁，不然这么多代码可能会看的一脸懵逼→_←）：html和css主要看下都有些什么元素，用了哪些类名。 为js代码做铺垫。方便看明白js代码中是哪个元素在做什么。 html代码 focus demo 1 2 3css代码 * { margin: 0; padding: 0; } li { list-style: none; } #box { position: relative; width: 150px; height: 150px; border: 1px solid black; margin-left: 600px; overflow: hidden; } /*#lit_box { width: 50px; height: 50px; background-color: pink; }*/ #box #ul01 { position: absolute; width: 400%; height: 100px; border: 1px solid red; z-index: 1; animate-duration: 2s; } #box #ul01 li { float: left; width: 150px; height: 100%; } #box #ul01 li:first-child { background-color: pink; } #box #ul01 li:nth-child(2) { background-color: purple; } #box #ul01 li:nth-child(3) { background-color: blue; } #box #ul01 li:nth-child(4) { background-color: pink; } #left_btn, #rig_btn { position: absolute; width: 20px; height: 20px; background-color: green; z-index: 2; display: none; } #left_btn { top: 40px; left: 0; } #rig_btn { top: 40px; right: 0; } #circleDot { position: absolute; z-index: 2; left: 0; bottom: 70px; width: 100%; height: 14px; } #box #circleDot #ul02 { margin: 0 20px; } #box #circleDot #ul02 li { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: #fff; margin: 0 5px; cursor: pointer; } .current { background-color: #FAAA3C !important; }重点来了：js代码 //1， 鼠标放box上，按钮出现， 鼠标离开box， 按钮隐藏 //获取元素 var box = document.getElementById('box'); var left_btn = document.getElementById('left_btn'); var rig_btn = document.getElementById('rig_btn'); var ul01 = document.getElementById('ul01'); //给盒子box 注册事件 box.addEventListener('mouseenter', function() { left_btn.style.display = 'block'; rig_btn.style.display = 'block'; //停止自动播放 clearInterval(timer); //停止后 清空计时器变量 timer = null; }); box.addEventListener('mouseleave', function() { left_btn.style.display = 'none'; rig_btn.style.display = 'none'; //开启自动播放 //timer已经声明过了，这里就不用重复声明了 timer = setInterval(function() { rig_btn.click(); //直接调用右侧按钮的点击事件 }, 1500); }); //创建动画函数 这里的动画函数用了缓动效果，可以提升用户体验 function animate(obj, target, callback) { //obj是谁要移动 target是移动到目标位置的距离 callback是回调函数形参 //先清除定时器 clearInterval(obj.timer); //每次移动的距离 = （目标值-现在的位置）/10 function move() { //缓动的核心 把obj移动到目标值的过程分为若干个小步 //让这个移动有一个过程，而不是瞬移到目的地 var step = (target - obj.offsetLeft) / 10; //代码简化： 三元运算符 step = step > 0 ? Math.ceil(step) : Math.floor(step); //obj.style.marginLeft = obj.offsetLeft + step + 'px'; if(obj.offsetLeft == target) { clearTimeout(obj.timer); if(callback) { callback(); } } //用left记录下移动每一小步的过程 obj.style.left = obj.offsetLeft + step + 'px'; } //用定时器让盒子动起来 看见动这个字，基本都是要用定时器的 //每50毫秒移动一个step的距离 obj.timer = setInterval(move, 50); } //2，动态生成小圆圈 //图片宽度是 ① box.clientWidth 不含盒子边框的盒子宽度 //② box.offsetWidth 是包含盒子边框的盒子宽度 //因为我这里为了直观观察，给盒子加了边框 所以我这里用box.clientWidth去掉边框 //点击小圆点，左右按钮等都要用到盒子宽度 //所以需要把盒子宽度设置成全局变量 var pic_width = box.clientWidth; //（2）添加元素 往ul02里面添加 所以先获取ul02元素 var ul02 = document.getElementById('ul02'); //要添加几个小圆点呢 有几张图片就添加几个li //所以用for循环添加 //console.log(ul01.children.length); for (var i = 0; i //清除所有小li的current类 for(var i = 0; i if(flag) { //把节流阀关了 一张图片移动结束前 点击按钮无效 flag = false; //先做一次判断 第2张图片1后再点击 就直接跳过第1张图片1 if (num == ul01.children.length - 1) { ul01.style.left = 0; num = 0; } //每点击一次，num就自增1 num++; //调用动画函数 animate(ul01, -num*pic_width, function() { //一张图片播放完毕，打开节流阀 点击按钮让图片移动 flag = true; }); //小圆点跟着移动 circle++; //做个判断 如果显示图片3后 再点击 就让circle重置为0 重新开始轮播 //不然在点第四次的时候 小圆圈就没了 if(circle == ul02.children.length) { circle = 0; } cir(); } }); //（2）再看左侧按钮，点击左侧按钮1次，图片就往右移动1个图片的宽度 //移动方向不同 数据也需要修改一下 //注册左侧按钮的点击事件 left_btn.addEventListener('click', function() { if(flag) { flag = false; //先做一次判断 第2张图片1后再点击 就直接跳过第1张图片1 if (num == 0) { num = ul01.children.length - 1; ul01.style.left = -num*pic_width + 'px'; } //每点击一次，num就自增1 num--; //调用动画函数 animate(ul01, -num*pic_width, function() { flag = true; }); circle--; //做个判断 如果显示图片3后 再点击 就让circle重置为0 重新开始轮播 //不然在点第四次的时候 小圆圈就没了 if(circle for(var i = 0; i rig_btn.click(); //直接调用右侧按钮的点击事件 }, 1500); //6，鼠标放在图片上 停止自动播放 鼠标离开 恢复自动播放 //7，节流阀 控制点击按钮时 图片的播放速度 //防止快速点击 造成图片播放速度过快的情况 //当点击按钮时 图片要在完成播放后 点击按钮才能继续播放图片 //声明变量flag进行控制 控制谁 就把节流阀安装在谁的里面 //这里是控制按钮点击的 因为左右按钮都需要 所以flag需要是全局变量所有解释和步骤都在js代码里了。看代码的时候一定一定要自己敲一敲，理清思路，绝对事半功倍！ 疑问1：既然num index circle都要绑定在一起，为啥不用同一个变量呢 我的理解是，index是局部变量，出了作用域就没用了。再就是 重置归0的条件不一样，不能同时操作。 最后 同一个作用域内 两者需要在不同时间点内操作不同的对象，最好还是分开，操作性更强。所以没办法统一。 疑问2： 为啥一定要克隆图片1放在图片3的后面呢？只是为了实现无缝连接吗？ 提供一个简单的思路：假如现在没克隆图片1，当轮播到图片3时，继续轮播，会有两种情况发生。 《—情况1：—》ul01.style.left值是-300px 立即跳转到图片1，这样就能做到无缝连接，但是你会发现，图片3是不会显示2秒后再显示图片1的，而是直接跳转到图片1了。这显然是失败的操作。 《—情况2：—》不立即跳转到图片1，而是继续向后轮播，给ulo1增加宽度。这就很明显，漏出空白了。 也很失败。 可以自己敲个代码试一下。一目了然了。 疑问3： 代码量多了，bug肯定会产生，该怎么清除bug呢 u1s1，我在反复练习轮播图的过程中，遇到过n多次的bug， 排查的步骤就是先看console，排查代码是否有误。如果无误，再找到bug相关的元素，找到对应的代码块，对代码块逐步注释（或修改）–查看变化–注释（或修改）–查看变化。当注释了某个代码或者修改了某项数据，对交互结果产生影响时，就说明找到病根了。然后对症下药进行清除。这个过程就是-----------------痛并快乐着… |
感觉很好玩的样子，哈哈哈哈~ 话说csdn是否考虑在写博客的里面加个表情包，感觉会更好玩啦~（来自一个表情包控的yy*-* )【本文地址】
今日新闻 |
推荐新闻 |