JS轮播图（焦点图）最详细解析，（思路是什么，每一步要怎么做，为啥要这么做，需要注意什么，bug怎么处理，附hmtl、css、js代码和详解） |
您所在的位置：网站首页 › 轮播图模块图片最多可以放多少个 › 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 |
感觉很好玩的样子，哈哈哈哈~ 话说csdn是否考虑在写博客的里面加个表情包，感觉会更好玩啦~（来自一个表情包控的yy*-* )【本文地址】
今日新闻 |
推荐新闻 |