点击小圆点不起切换图片的作用，我取到的index值是个nan的string，怎么更改

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="css/作业.css"> -->
</head>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 900px;
height: 400px;
margin: 0 auto;
position: relative;
/* top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -450px; */
/* text-align: center; */
}
h3{
text-align: center;
line-height: 45px;
}
.slider{
width: 900px;
height: 345px;
position: relative;
}
.img-block{
width: 900px;
height: 345px;
display: none;
float: left;
}
.img-active{
display: block;
}
.prev{
height: 80px;
width: 40px;
background: url(../img/pre2.png) no-repeat center center;
position: absolute;
top: 50%;
left: 0;
margin-top: -40px;
}
.next{
height: 80px;
width: 40px;
background: url(../img/arrow.png)  no-repeat center center ;
position: absolute;
top: 50%;
right: 0;
margin-top: -40px;
}
a:hover{
background-color: #333;
opacity: 0.8;
filter:alpha(opacity=80);
}
.dots {
    position: absolute;
    bottom: 24px;
    right: 0;
    text-align: right;
    padding-right: 24px;
    line-height: 12px;
}

.dots span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px;
    background-color: rgba(7, 17, 27, 0.4);
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
.dots span.active{
    box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
    background-color: #ffffff;
}

</style>
<body>
<div class="main">
<h3>jQuery</h3>
<div class="slider">
<div class="img" id="img">
<a href="#">
<img src="img/1.jpg" alt="" class='img-block img-active'>
</a>
<a href="#">
<img src="img/2.jpg" alt="" class='img-block '>
</a>
<a href="#">
<img src="img/3.jpg" alt="" class='img-block'>
</a>
<a href="#">
<img src="img/4.jpg" alt="" class='img-block'>
</a>
<a href="#">
<img src="img/5.jpg" alt="" class='img-block'>
</a>
</div>
</div>
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<div class="dots" id="dots">
<span class="active"></span>
<span>
</span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="js/作业.js">
</script>
</body>

</html>

$(function(){
var img = $('.img a img'),
span = $('.dots span'),
main = $('.main'),
k = 0,
len = img.length,
timer = null,
btn = $('button'),
prev = $('.prev'),
next = $('.next');
//切换图片函数
function changeimg(){
img.removeClass('img-active');
span.removeClass('active');
img.eq(k).addClass('img-active')
span.eq(k).addClass('active')
}
//当鼠标移开时定时切换
main.mouseout(function(){
timer = setInterval(function(){
k++
if(k>=len){
k = 0
}
changeimg()
}, 1000)
})
main.mouseout()
//当鼠标覆盖图片是解除定时。。
//这边如果我用hover的话，会出错误，不知道为什么
main.mouseover(function(){
if(timer)
clearInterval(timer)
})
//点击按钮奇幻图片，上一张
prev.on('click',function(){
k--
if (k < 0) {
k = len-1
}
changeimg()
})
//点击按钮奇幻图片，下一张
next.on('click', function () {
k++
if (k >= len) {
k = 0
}
changeimg()
})
//点击圆点切换图片
for (var i = 0; i < len; i++) {
span.eq(i).attr('id',i)
console.log(typeof(span.eq(i).attr('id')))
span.eq(i).on('click',function () {
k = Number(span.eq(i).attr('id'));
console.log(k)
changeimg();
})
}
})

点击圆点切换图片的代码就在最底部那边，麻烦老师帮我看一下，谢谢

慕无忌6236884 2018-07-13

源自：jQuery插件 1-13 作业题