求助：JS的.classList.add()失效，电影网站轮播初始化异常

问题根源 #

你代码里的核心错误是用了document.querySelectorAll()获取单元素的slide——这个方法返回的是NodeList元素集合，而不是单个DOM元素。classList是单个DOM元素的专属属性，直接给NodeList调用.classList.add()自然会失效。

每个.Av2012、.Av2015这类slide在页面里都是唯一的单个div，应该用document.querySelector()来获取单个元素。

修复步骤 #

1. 替换选择器方法：把所有querySelectorAll替换成querySelector，确保每个变量指向单个DOM元素
2. 修正首屏激活代码：直接给数组第一个元素添加active类，不需要赋值给额外变量
3. 补充轮播切换逻辑（可选，完成完整功能）：给左右箭头绑定点击事件，切换时先隐藏当前slide，再更新索引并显示目标slide

修改后的完整代码 #

JavaScript #

let left = document.querySelector('.left');
let right = document.querySelector('.right');

// 改用querySelector获取单个元素
let av2012 = document.querySelector('.Av2012');
let av2015 = document.querySelector('.Av2015');
let av2018 = document.querySelector('.Av2018');
let av2019 = document.querySelector('.Av2019');

let slides = [av2012, av2015, av2018, av2019];
let index = 0;

// 激活第一个幻灯片
slides[index].classList.add('active');

// 左箭头切换逻辑
left.addEventListener('click', () => {
  // 隐藏当前幻灯片
  slides[index].classList.remove('active');
  // 更新索引，循环到最后一张
  index = index === 0 ? slides.length - 1 : index - 1;
  // 显示目标幻灯片
  slides[index].classList.add('active');
});

// 右箭头切换逻辑
right.addEventListener('click', () => {
  slides[index].classList.remove('active');
  index = index === slides.length - 1 ? 0 : index + 1;
  slides[index].classList.add('active');
});

CSS（保持原代码即可） #

body{
    font-family: 'Roboto', sans-serif;
    margin: 20px 40px 0 40px;   
}

.head{
    display: flex;
    justify-content: space-between;
}

ul{
    list-style: none;
    display: flex;
    gap: 100px;  
}

#searchBar{
    width: 600px;
    height: 50px;
    border-radius: 17px;   
}

input{
    font-size: 1.5em;
    position: relative;
    left:20px;   
}
button{
border: none;
background-color: transparent;
position: relative;
left:-50px;
top: 5px;
z-index: 10; 
cursor: pointer;
}

.arrow{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
}

.left, .right{
    cursor: pointer;
    z-index: 10;
}

.right{
    transform: rotatey(180deg);
}
.movies{
    display: flex;
    justify-content: space-evenly;
    top:-550px;
    position: relative;
       
}

.active{
    visibility: visible;
}

.deactive{
    visibility: hidden;
}

.Av2012, .Av2015, .Av2018, .Av2019{
    width: 800px;
    display: flex;
    align-items: center;
    gap: 30px;
    position: absolute;
    visibility: hidden; 
}

h2, h3{
    margin-top: 0;
    margin-bottom: 0;
}

.about{margin-top: 20px;}

HTML（保持原代码即可） #

<body>
<div class="head">
    <div class="logo">
        <img src="Assets\logo.png" alt="website logo" width="60px" height="60px">
    </div>
    <div class="searchBar">
        <form action="search">
            <input type="text" placeholder="Find HD Movies and TV show" name="seach" id="searchBar">
            <button> <img src="Assets\search icon.svg" alt="searchIcon">
            </button>
        </form>
    </div>
    <div class="navigation">
        <ul>
            <li>Genre</li>
            <li>Year</li>
            <li>Rating</li>
        </ul>
    </div>
</div>
<div class="arrow">
    <div class="left">
        <img src="Assets\left arrow.svg" alt="go left side">
    </div>
    <div class="right">
        <img src="Assets\left arrow.svg" alt="go right side">
    </div>
</div>
<div class="movies">
    <div class="Av2012">
        <div class="poster"><img src="Assets\The Avengers 2012.jpg" alt="avengers 2012 movie poster" width="240px" height="400px"></div>
        <div class="discripction">
        <div class="title"><h2>The Avengers 2012 </h2></div>
        <div class="rating"><h3>8/10 IMDb</h3></div>
        <div class="about">Nick Fury is compelled to launch the Avengers Initiative when Loki poses a threat to planet Earth. His squad of superheroes put their minds together to accomplish the task.</div>
    </div>
</div>
<div class="Av2015">
    <div class="poster"><img src="Assets\The Avengers 2015.jpg" alt="avengers 2015 movie poster" width="240px" height="400px"></div>
    <div class="discripction">
    <div class="title"><h2>Avengers: Age of Ultron 2015 </h2></div>
    <div class="rating"><h3>7.3/10 IMDb</h3></div>
    <div class="about">Tony Stark builds an artificial intelligence system named Ultron with the help of Bruce Banner. When the sentient Ultron makes plans to wipe out the human race, the Avengers set out to stop him.</div>
</div>
</div>
<div class="Av2018">
    <div class="poster"><img src="Assets\The Avengers 2018.jpg" alt="avengers 2018 movie poster" width="240px" height="400px"></div>
    <div class="discripction">
    <div class="title"><h2>Avengers: Infinity War 2018 </h2></div>
    <div class="rating"><h3>8.4/10 IMDb</h3></div>
    <div class="about">The Avengers must stop Thanos, an intergalactic warlord, from getting his hands on all the infinity stones. However, Thanos is prepared to go to any lengths to carry out his insane plan.</div>
</div>
</div>
<div class="Av2019">
    <div class="poster"><img src="Assets\The Avengers 2015.jpg" alt="avengers 2019 movie poster" width="240px" height="400px"></div>
    <div class="discripction">
    <div class="title"><h2>Avengers: Endgame 2019</h2></div>
    <div class="rating"><h3>8.4/10 IMDb</h3></div>
    <div class="about">After Thanos, an intergalactic warlord, disintegrates half of the universe, the Avengers must reunite and assemble again to reinvigorate their trounced allies and restore balance.</div>
</div>
</div>
</div>   
    <script src="script.js"></script>
</body>

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