为什么幻灯片中的图像不透明度没有改变?(CSS，Javascipt)

Question

我正在尝试构建一个图像转盘。然而，我遇到了一个不透明度动画/过渡的意外行为。

我有一个.active类，它正在三个img之间成功转换。这个.active类添加了opacity: 1;。然而，当最后一个img加载到DOM中时，它会保留其初始opacity: 0;，即使.active类每六秒添加到每个img，opacity也不会改变。

我想这可能是一个CSS问题，但我很感激你的帮助！

Javascript

const autoSlideshow = () => {
const slides = document.querySelectorAll('.slides img')
const slideDelay = 6000
let currentSlide = 0

slides[currentSlide].classList.add('.active')

const nextSlide = () => {
slides[currentSlide].classList.remove('.active')
currentSlide = (currentSlide + 1) % slides.length
slides[currentSlide].classList.add('.active')
}

setInterval(nextSlide, slideDelay)
}
autoSlideshow()

CSS

.slides img.active {
opacity: 1;
transition: opacity 2s ease-in-out;
}
.slides img {
position: inherit;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
}

HTML

<div class="slides">
<img src="img/ac62.jpg" alt="couple 1"> 
<img src="img/b348.jpg" alt="couple 2">
<img src="img/bk40.jpg" alt="couple 3">
</div>

Answer 1

解决方案

const autoSlideshow = () => {
const slides = document.querySelectorAll('.slides img')
const slideDelay = 6000
let currentSlide = 0
slides[currentSlide].classList.add('active')
const nextSlide = () => {
slides[currentSlide].classList.remove('active')
currentSlide = (currentSlide + 1) % slides.length
slides[currentSlide].classList.add('active')
}
setInterval(nextSlide, slideDelay)
}
autoSlideshow()

用active代替.active

Answer 2

添加到classList或从classList中删除时，需要从.active中删除.。因为您已经在执行classList.add/classList.remove，所以没有必要定义具有.的类

const autoSlideshow = () => {
const slides = document.querySelectorAll('.slides img')
const slideDelay = 6000
let currentSlide = 0

slides[currentSlide].classList.add('active')

const nextSlide = () => {
slides[currentSlide].classList.remove('active')
currentSlide = (currentSlide + 1) % slides.length
slides[currentSlide].classList.add('active')
}

setInterval(nextSlide, slideDelay)
}
autoSlideshow()

.slides img.active {
opacity: 1;
transition: opacity 2s ease-in-out;
}
.slides img {
position: inherit;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
}

<div class="slides">
<img src="https://source.unsplash.com/random" alt="couple 1"> 
<img src="https://source.unsplash.com/random" alt="couple 2">
<img src="https://source.unsplash.com/random" alt="couple 3">
</div>