在做轮播模块的时候遇到问题是：你在 连续指示小按钮 时候再去 只有 点击 下一张按钮，出现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="data:images/5.jpg" alt="">
<img src="data:images/1.jpg" alt="">
<img src="data:images/2.jpg" alt="">
<img src="data:images/3.jpg" alt="">
<img src="data:images/4.jpg" alt="">
<img src="data:images/5.jpg" alt="">
<img src="data: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)
}
};
};