Question

我已经广泛搜索了相同的内容，但没有一种解决方案有效，因此请在此处进行询问

我想循环更改背景图像[基本上更改元素的类]。但是，对我而言[真正的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？

注意：我不想使用任何第三方库。这是一个学习项目。

Answer 1

正如我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>

Answer 2

根据评论中的建议，setInterval is exactly tailored可以满足您的需求。它允许您每x毫秒运行一个函数（例如addHomeInnerClass）。但是请注意，使用此功能需要您稍微更改imageNumber逻辑。另外，正如评论中提到的那样，您应该在添加新类之前删除旧类。

我建议采用以下方法：

let imageNumber = 0;
function addHomeInnerClass(selector) {
  selector.classList.remove('home-content-' + imageNumber);
  imageNumber++;
  if(imageNumber === 5) imageNumber = 1;
  selector.classList.add('home-content-' + imageNumber);
}

document.addEventListener('DOMContentLoaded', function() {
  const homeInner = document.querySelector('.home-inner');

  setInterval(() => addHomeInnerClass(homeInner), 1000);
});

如何无限运行setTimeOut？

2 个答案: