javascript - I can't make a fade slider
问题描述
During the layout of the slider, there was a problem that I could not make one picture invisible and the other visible. The error shown by the debugger: DOMException: Failed to execute 'remove' on 'DOMTokenList': The token provided contains HTML space characters, which are not valid in tokens. I found the same problem on stackoverflow, but there the questioner actually had spaces in the class names:Javascript InvalidCharacterError when modifying a css name with a space I couldn't find any gaps in my code.
Code:
(function() {
const slide = document.querySelectorAll('.fade-slider__item');
const activeClass = document.querySelector('.fade-slider__item--visible')
let index = 0;
setInterval(function() {
slide[index].classList.remove(activeClass);
index++;
slide[index].classList.add(activeClass);
console.log(index);
}, 5000)
}());
.
<ul class="fade-slider">
<li class="fade-slider__item fade-slider__item--style-one fade-slider__item--visible">
<div class="fade-slider__text-one">
<h1 class="lined-text">
<div class="lined-text__word">very</div>
<div class="lined-text__word">mesmerizing,</div>
<div class="lined-text__word lined-text__word--color-yellow">unexplored</div>
<div class="lined-text__word lined-text__word--color-yellow">space</div>
</h1>
</div>
</li>
<li class="fade-slider__item fade-slider__item--style-two">
<div class="fade-slider__text-two">
<h1 class="lined-text">
<div class="lined-text__word">So beautiful</div>
<div class="lined-text__word lined-text__word--color-yellow">universe</div>
</h1>
</div>
</li>
</ul>
.
.fade-slider {
width: 100%;
height: 100%;
display: block;
}
.fade-slider__item{
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
opacity: 0;
}
.fade-slider__item--visible {
opacity: 1;
}
.fade-slider__item--style-one {
background: url(./img/lol.jpg) center center / contain no-repeat;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
.fade-slider__item--style-two {
background: url(./img/kek.jpg) center center / contain no-repeat;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
解决方案
Your index is going higher and higher, till the point there are no sliders available anymore. You need to reset it to make it work:
let index = 0;
setInterval(function() {
slide[index].classList.remove(activeClass);
if (slide[index + 1]) {
index++;
} else {
index = 0;
}
slide[index].classList.add(activeClass);
}, 5000)
推荐阅读
- python - Python:从字符串中提取数字并找到组的最大值
- r - 使用顺序值填充列
- javascript - 下拉选择反应标签
- r - 在R中使用for循环根据条件从数据帧列表中删除数据帧
- c++ - VS2008 C++ 项目 - 在发布模式下进入 3rd 方代码
- entity-framework-6 - 从 VS 2013 升级到 2019:在 VS 2019 中使用 EF6 运行/调试 VS 2013 MVC 5 导致延迟加载错误
- curl - AWS CodeArtifact HTTP API 返回:快照名称无效
- angular - 从角度下载的Gzip文件不提取
- php - 如何解决 Moodle 3.8.4 上的 ddl 执行错误?
- java - Docker 容器无法上传 EMR 托管的 Hadoop