如何使用JavaScript实现带淡入淡出效果的字符串序列动画？

Got it! Here's a neatly formatted version of your cycling text code, including the matching HTML structure, ready to use:

HTML 结构 #

First, you'll need the target div that the script will update:

<div id="sequence">We Do A</div>

JavaScript 逻辑 #

This script will cycle through your array of text values and update the div every 3 seconds, looping infinitely once it reaches the end:

<script>
  var example = ['A','B','C','D'];
  textSequence(0);

  function textSequence(i) {
    if (example.length > i) {
      setTimeout(function() {
        document.getElementById("sequence").innerHTML = "We Do " + example[i];
        textSequence(++i);
      }, 3000); // 3-second delay (adjust the millisecond value to change speed)
    } else if (example.length == i) {
      // Reset to start the loop over
      textSequence(0);
    }
  }
</script>

Quick Notes #

• The example array holds all the values you want to cycle through—add or remove items here to adjust the sequence
• The setTimeout delay is set to 3000ms (3 seconds); change this number to make the text switch faster or slower
• The function uses recursion to keep the cycle going: after updating the text, it calls itself with the next index, and resets to index 0 once it's gone through all items

内容的提问来源于stack exchange，提问作者Martin Erlic