如何使用settimeout迭代数组

Question

我试图让文本在数组中循环，并在屏幕上呈现CSS动画，并在每次更改中延迟一秒钟。我的可执行代码将给出我想要实现的目标。

HTML

 <div class="first">
   <div class="vert-line"></div>
    <p>Are you looking for a quick learner?</p>
  </div> 
  <div class="second">
   <div class="vert-line"></div>
    <p>Someone who is ever evolving?</p>
   </div>
   <div class="third">
     <div class="vert-line"></div>
       <p>Someone who is strives to improve their knowledge?</p>
    </div>
    <div class="fourth">
     <div class="vert-line"></div>
      <p>Someone who loves problem-solving and finding solutions?</p>
   </div>
   <div class="fifth">
     <div class="vert-line"></div>
       <p>Someone who has the tenacity to succeed?</p>
   </div>

JS

let first = document.querySelector(".first p")
let second = document.querySelector(".second p")
let third = document.querySelector(".third p")
let fourth = document.querySelector(".fourth p")
let fifth = document.querySelector(".fifth p")

let textArray =[first,second,third,fourth,fifth]
let textArrayShow = []

function AnimationTimer(){
  for(let i =0; i < textArray.length; i++){
    console.log(textArray[i])
  }

  textArray.forEach(() => {
    setTimeout(5000)
  });
}

AnimationTimer()

所以最终的结果是，它需要动画，当它滑动下来时，它会改变到数组中的下一个文本，它需要一遍又一遍地重复自己。

它意味着成为我这种人的卖点

Answer 1

所以如果我明白你想这么做

​

let textElement = document.querySelector("p")
let textArray =[
  "Are you looking for a quick learner?",
  "Someone who is ever evolving?",
  "Someone who is strives to improve their knowledge?",
  "Someone who loves problem-solving and finding solutions?",
  "Someone who has the tenacity to succeed?"
]
let index = 0
textElement.innerText = textArray[index]

setInterval(()=>{
  index = (index +1)%textArray.length
  textElement.innerText = textArray[index]
}, 1000)

<p></p>

​