用 parseInt()解决的 小 bug
在做轮播模块的时候遇到问题是：你在 连续指示小按钮 时候再去 只有 点击 下一张按钮，出现bug: 指示小按钮的 className 当前显示的 calssName 为 undefined ！
// 分析：
// 因为我们不管怎样点击 指示按钮的时候 ，你在点击 下一张/上一张 按钮 都是按我们写好的逻辑给当前 index++/ index--
// 而这种情况只有出现 ：指示按钮 连续点击多次 再点击下一张按钮 才有问题 ，而点击上一张按钮 没有问题
调试情况：
//在查看chrome 的调试发现例如：我点击第三个指示按钮 连续多次 再点击下一张按钮 buttons[index - 1].className = 'on'; // index = 31 若是在js再执行 跟 index = //311 3111 31111 重复类似的报错。
//这种31 311 3111看上去就是 字符串的拼接 而不是 number 的加减 ,因此在会想到问题的所在 因为在你点击指示按钮并获取 指示按钮属性 getAttribute('data-slide') 的 储存的索引 且 把 index = myIndex 而导致出现 bug 。
原因： var myIndex = this.getAttribute('data-slide') ;
解决：var myIndex = parseInt(this.getAttribute('data-slide') );
总结：只要是关于到计算的 都必须进行类型转换 parseInt() | parseFloat() 保证 逻辑正确性
希望下次大家遇到我这样类似的 小 bug 能第一时间找到问题所在，我想大家没有我这么粗心，不过我还是用记录下来，希望能给你们 能避免我这样的问题！
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点轮播图</title> <style> #container { width: 600px; height: 400px; overflow: hidden; position: relative; box-sizing: border-box; border: 3px solid #333; margin: 100px auto } #container #list { width: 4206px; height: 400px; position: absolute; z-index: 1; } #container #list img { width: 600px; height: 100%; float: left; } #container #buttons { height: 10px; width: 100px; position: absolute; left: 250px; bottom: 20px; z-index: 2; } #container #buttons span { float: left; display: inline-block; height: 10px; width: 10px; border-radius: 5px; background: #666; cursor: pointer; } #container #buttons span:nth-child(1) { margin-left: 10px; } #container #buttons span + span { margin-left: 5px; } #container #buttons span.on { background: #fff; } #container #buttons span:hover { background: #eee; } #container .arrow { display: block; cursor: pointer; width: 50px; height: 50px; position: absolute; top: 50%; margin-top: -25px; opacity: 0; z-index: 2; transition:0.4s ease-in; } #container a.pre { left: 20px } #container a.next { right: 20px; } #container .pre::after,#container .next::after{ content: ''; position: absolute; width: 50px; height: 50px; } #container .pre::after{ background: url("../images/arrow-left.png") no-repeat left top; background-size: 50px 50px; } #container .next::after{ background: url("../images/arrow-right.png") no-repeat left top; background-size: 50px 50px; } #container .arrow:hover { background: rgba(0, 0, 0, 0.6); } #container:hover .arrow { opacity: 1; transition:0.4s linear; } </style> </head> <body> <div id="container"> <div id="list" style="left:-600px"> <img src="images/5.jpg" alt=""> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> <img src="images/4.jpg" alt=""> <img src="images/5.jpg" alt=""> <img src="images/1.jpg" alt=""> </div> <div id="buttons"> <span class="on" data-slide='1'></span> <span data-slide='2'></span> <span data-slide='3'></span> <span data-slide='4'></span> <span data-slide='5'></span> </div> <a href="javascript:;" class="arrow pre" id="pre"></a> <a href="javascript:;" class="arrow next" id="next"></a> </div> <script> </script> </body> </html>
js代码：
window.onload = function () { var container = document.getElementById('container'); var buttons = document.getElementById('buttons').getElementsByTagName('SPAN'); var list = document.getElementById('list'); var pre = document.getElementById('pre'); var next = document.getElementById('next'); var index = 1; // 动画函数 判断是否在动画 var animated = false; // 自动切换 var timer; function play(){ timer = setInterval(function () { next.onclick() },2000) } function stop() { clearInterval(timer) } container.onmouseover = stop; container.onmouseout = play; play(); // 按钮点击事件 for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { if (this.className == 'on') { return; } var myIndex = parseInt(this.getAttribute('data-slide')); var offset = -600 * parseInt((myIndex - index)); animate(offset); index = myIndex; showButton(); } } //选中按钮的样式 function showButton() { for (var i = 0; i < buttons.length; i++) { if (buttons[i].className == 'on') { buttons[i].className = ''; break; } } buttons[index - 1].className = 'on'; } function animate(offset) { var newLeft = parseInt(list.style.left) + offset; // 动画函数 var times =300; //位移总的时间 var interval = 10;// 位移间隔 var speed = offset / (times / interval);//每次的位移量 function go() { animated = true; if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)) { list.style.left = parseInt(list.style.left) + speed + 'px'; setTimeout(go,interval); }else{ animated = false; list.style.left = newLeft + 'px'; if (newLeft < -3000) { list.style.left = -600 + 'px'; } if (newLeft > -600) { list.style.left = -3000 + 'px'; } } } go(); } /* 下一张 -600 */ next.onclick = function () { if (index == 5) { index = 1 } else { index += 1; } //debugger showButton(); // 还没有完动画 则不滑动 if(!animated){ animate(-600) } }; /* 上一张 +600 */ pre.onclick = function () { if (index == 1) { index = 5 } else { index -= 1; } showButton(); if(!animated){ animate(600) } }; };
