Replace/rotate 一个句子中的多个单词使用脚本或 CSS 动画

Question

我正在尝试 replace/rotate 在我网站 (Wordpress) 的一个段落中使用几个不同的词。我找到了一个脚本，可以让我更改一组单词，但不知道如何更改下一组。

var words = ["one", "two", "three"];
var i = 0;
var text = "one";

function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
console.log(i);
return text.replace(/one/, words[i]);
}

function _changeText() {
var txt = _getChangedText();
console.log(txt);
document.getElementById("changer").innerHTML = txt;
}
setInterval("_changeText()", 3000);

<h4>Count to <span id="changer">one</span> and (four, five, six) and (seven, eight, nine).</h4>

Answer 1

不清楚你到底在找什么。

var words = ["one", "two", "three"];
var i = 0;
var cnt =0;
var text = "one";

function _getChangedText() {
i = (i + 1) % words.length;
return  words[i];
}

function _changeText() {
var txt = _getChangedText();
//console.log(document.getElementsByClassName("changer")[cnt]);
document.getElementsByClassName("changer")[cnt].innerHTML = txt;
cnt++ ;
cnt=cnt % 2;
}

for(let i=0;i<2;i++){

setInterval("_changeText()", 3000);

}

<h4>Count to <span class="changer">one</span> and (four, five, six) and (seven, eight, nine).</h4>

<h4>Count to <span class="changer">one</span> and (four, five, six) and (seven, eight, nine).</h4>

Answer 2

这可能就是您想要的。如果您了解其工作原理，则可以轻松地扩展此代码。我添加了评论，以便您了解它。

; // This is a javascript object used as a hashmap
var changeList = {
  "one": "two",
  "two": "three",
  "three": "four",
  "four": "five",
  "five": "six",
  "six": "seven",
  "seven": "eight",
  "eight": "nine",
  // ...
}

function _changeText() {
  let els = document.querySelectorAll('.word-changer');
  //iterate over all .word-changer elements
  for (let i = 0; i < els.length; i++) {
    let el = els[i];
    // read out elements data-counter and data-max attributes
    let counter = parseInt(el.dataset.counter);
    let max =  parseInt(el.dataset.max);
    
    if(counter < max ) {
      // Update counter and replace word based on the "hashmap"
        counter++;
      el.innerHTML = changeList[el.textContent]; // This is where the words get swapped
      el.dataset.counter = counter;
    }
  }
}

setInterval(_changeText, 3000);

<h4>
Count to <span class="word-changer" data-counter="0" data-max="2">one</span> and <span class="word-changer" data-counter="0" data-max="2">four</span> and <span class="word-changer" data-counter="0" data-max="2">six</span>.
</h4>

Answer 3

我创建了一个名为 cycleable 的库来处理内联文本循环。它可用于实现您的目标，并且可以通过标记进行完全配置。

这是您的标记的样子

<link rel="stylesheet" href="/path/to/cycleable.css">

<h4 style="margin: 2rem;">
    Count to
    <span
        class="cycleable"
        js-items="one,two,three"
        js-timeout="3000"
    ></span>
    and
    <span
        class="cycleable"
        js-items="three,four,five"
        js-timeout="3000"
    ></span>
    and
    <span
        class="cycleable"
        js-items="five,six,seven"
        js-timeout="3000"
    ></span>.
</h4>

<script src="/path/to/cycleable.js"></script>
<script>
    _Cycleable_();
</script>

这是结果

Replace/rotate 一个句子中的多个单词使用脚本或 CSS 动画

Replace/rotate multiple words in a sentence using scripts or CSS animation

javascript

css

animate.css