Uncaught TypeError: slides is not a function 轮播功能失效问题求解

控制台抛出的slides is not a function是JavaScript语法使用错误导致的：
document.querySelectorAll('.slides')返回的是存储匹配DOM元素的类数组对象（NodeList），访问这类集合里的指定索引元素，必须用方括号[] 做索引取值，你在代码里错用了函数调用的圆括号()，浏览器解析时会把slides(i)识别为「执行名为slides的函数、传入参数i」，但slides本身是存DOM集合的变量，根本不是可执行的函数，直接触发类型错误，打断后续JS执行，轮播自然失效。

1. 找到script标签里的setActive函数，把两处错误的圆括号改成方括号：

// 原错误代码
slides(i).classList.add('active');
dots(i).classList.add('active');

// 修正后代码
slides[i].classList.add('active');
dots[i].classList.add('active');

修正后完整的setActive函数如下：

function setActive(i){
    for(slide of slides)
        slide.classList.remove('active');
    slides[i].classList.add('active');
    for(dot of dots)
        dot.classList.remove('active');
    dots[i].classList.add('active');
}

2. 顺带修复你CSS里的一个布局bug：当前header选择器下宽度写的是width: 100vh，vh是视口高度单位，作为块级头部元素宽度应该设为width: 100%，否则宽屏设备下导航栏会错位，修改对应代码：

header
{
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%; /* 替换原有的100vh */
    padding: 30px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

改完这两处刷新页面，点击底部圆点就能正常切换轮播内容了。

内容的提问来源于stack exchange，提问作者Benjamim Castro