javascript - JavaScript图片轮播问题：小圆点index始终为0？

Question

window.onload = function(){ //1.进行元素的获取 // 获取图片var imgs = document.querySelectorAll("#img-list li ");// 获取小圆点var points = document.querySelectorAll("#points a");// 获取左右按钮var btns = document.querySelectorAll(".btn");// 定义当前显示的下标var index = 0;// 定义timervar timer;//2.设计方法让所有的图片隐藏 function hiddenImages(){    for(var i = 0; i < imgs.length; i++){        imgs[i].style.opacity = 0;    } }//  3.设计方法让所有的小圆点处于隐藏的状态function hiddenPoints(){    for(var i = 0 ; i < points.length ; i++){        points[i].className = "hd";    }}// 4.设计方法让小圆点显示和图片的显示都处于隐藏状态并且根据当前设置的下标来进行显示function chageAll(){    hiddenImages();    hiddenPoints();    imgs[index].style.opacity = 1;    points[index].className = "highlight";}// 5.设计轮播方法function carousel(){    timer = setInterval(function(){        chageAll();        index++;        if(index > imgs.length-1){            index = 0;        }    },3000)}carousel();// 6.进行小圆点的触发，让按钮与图片的下标一致for(var i = 0 ; i < points.length ; i++){    points[i].index = i;    points[i].onclick = function(){        console.log(this.index);            }}};

小圆点的index一直为0，响应函数的循环体一直跳过没执行，循环体内的this永远是window，，一直找不到原因，，请问哪位大神帮忙看看

不管加什么循环体总会跳过不执行

Answer 1

var 改成 let 试试