javascript - 为什么此幻灯片中图像的不透明度没有改变?(CSS,Javascipt)
问题描述
我正在尝试构建图像轮播。但是,我遇到了不透明动画/过渡的意外行为。
我有一.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>
解决方案
解决方案
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
推荐阅读
- react-native - 更改文本不适用于导入的组件
- flutter - 颤振中有两个参数的AutoFillHints
- python - 为什么python字符串反向方法返回正常字符串?
- javascript - 如何在静态 HTML 文件中添加 JS 的动态时间戳
- python - 从几何级数中的numpy数组中删除值
- java - SNMP4J 与 MIB 浏览器不兼容吗?
- angular - Angular 库:如何从 npm 包切换到 npm sym 链接?
- swiftui - 如何发送 Scene.handlesExternalEvents(matching:) 接收的事件?
- python-3.x - 如何使用 Python Pandas 根据行将一列数据更改为多列?
- wmi - 如何查询 WMI GroupUser 对象并选择 PartComponent 属性