我已经广泛搜索了相同的内容,但没有一个解决方案有效,所以在这里提问
我想在循环中更改背景图像 [基本上更改元素的类]。但对我来说真正棘手的部分 [刚接触 JavaScript] 是 setTimeOut 在固定次数后停止。这是代码:
function addHomeInnerClass(selector, imageNumber = 0) {
imageNumber += 1;
if (imageNumber === 1) {
selector.classList.add('home-content-1');
}
if (imageNumber === 2) {
selector.classList.add('home-content-2');
}
if (imageNumber === 3) {
selector.classList.add('home-content-3');
}
if (imageNumber === 4) {
selector.classList.add('home-content-4');
imageNumber = 0;
}
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
document.addEventListener('DOMContentLoaded', function() {
const homeInner = document.querySelector('.home-inner');
addHomeInnerClass(homeInner, 0);
});
这是我的 HTML 部分:
<section class="home" id="home">
<div class="home-inner">
</div>
</section>
这是我的 CSS3:
.home {
background-image: linear-gradient(to right, #ff5517 0%, #ff7000 40%, #db1d5e 80%);
height: 88.98vh;
.home-content-1 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (2).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-2 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (3).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-3 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/(4).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-4 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (1).jpg") no-repeat center center/cover;
z-index: 1;
}
}
我知道 CSS 和 HTML 代码在这里无关紧要,但如果我能找到其他方法来做我想做的事,那就太好了。
我想做什么? 使用纯javascript来获得淡入淡出的图像效果。
我卡在哪里了? 不知道如何无限次运行 setTimeOut?
注意:我不想使用任何第三方库。这是一个学习元素。
最佳答案
正如我 said in a comment ,问题不在于计时器停止运行。这是因为您在添加新类时并没有删除旧类。以下是如何在简化代码的同时做到这一点:
function addHomeInnerClass(selector, imageNumber = 0) {
selector.classList.remove('home-content-' + imageNumber);
imageNumber = imageNumber % 4 + 1;
selector.classList.add('home-content-' + imageNumber);
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
实例(我稍微修改了 CSS 以便于查看更改;我还在 .home
规则之后添加了缺少的 }
):
function addHomeInnerClass(selector, imageNumber = 0) {
selector.classList.remove('home-content-' + imageNumber);
imageNumber = imageNumber % 4 + 1;
selector.classList.add('home-content-' + imageNumber);
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
document.addEventListener('DOMContentLoaded', function() {
const homeInner = document.querySelector('.home-inner');
addHomeInnerClass(homeInner, 0);
});
.home {
height: 88.98vh;
}
.home-content-1 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=1") no-repeat center center/cover;
z-index: 1;
}
.home-content-2 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=2") no-repeat center center/cover;
z-index: 1;
}
.home-content-3 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=3") no-repeat center center/cover;
z-index: 1;
}
.home-content-4 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=4") no-repeat center center/cover;
z-index: 1;
}
}
<section class="home" id="home">
<div class="home-inner">
</div>
</section>
关于javascript - 如何无限次运行 setTimeOut?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57544330/