如何使用JavaScript的setInterval使屏幕上的li元素一次一个地自动播放？

ogsagwnx 于 2023-01-29 发布在 Java

关注(0)|答案(1)|浏览(101)

我想通过使用setInterval在屏幕上逐个显示img的li元素。我不知道如何处理这个问题，我已经使按钮工作以单击将通过li元素的。
我试着做一个函数，它将遍历li元素的，然后在setInterval中调用它。它没有像我预期的那样工作，它从0-4计数，并且重复。

const slide = document.querySelector("[data-slides]");
console.log(slide);

const newIndex = [...slide.children];
console.log(newIndex);
let start = 0;

function slider() {
  if (start < newIndex.length) {
    start = start + 1;
  } else {
    start = 0;
  }
  console.log(start);
}

setInterval(slider, 2000);

代码编号：https://codepen.io/jimmyjimenez2400/pen/KKBeezj

JavaScript

来源：https://stackoverflow.com/questions/75264401/how-to-make-autoplay-with-li-elements-on-screen-one-at-a-time-with-setinterval-u

1条答案

按热度按时间

vvppvyoh1#

我认为您需要在slider（）函数的每次迭代中更改li元素的可见性。您可以向当前li元素添加一个类（“visible”），并将其从前一个元素中删除，以及跟踪当前幻灯片索引。
请尝试以下方法：

const slide = document.querySelector("[data-slides]");
const newIndex = [...slide.children];
let start = 0;

function slider() {
  newIndex[start].classList.remove("visible");
  start = (start + 1) % newIndex.length;
  newIndex[start].classList.add("visible");
}

setInterval(slider, 2000);

赞(0）回复(0）举报 2023-01-29

我来回答

如何使用JavaScript的setInterval使屏幕上的li元素一次一个地自动播放？

1条答案

相关问题

热门标签

最新问答