Javascript 使用jquery在一段时间后更改标题词

我想动画标题词在我的网站上改变文本每4秒。结构应该是这样的：“XY”和“ZZ”，其中XY和ZZ成为不同的单词，连接器“&”始终保持在相同的位置

我看到了这种效果

你会怎么做呢

这就是我所拥有的：

    $(document).ready(function(){
   setTimeout(function(){
    $(".maintext1").fadeOut(function() {
    $(this).html("beautiful ").fadeIn();
      });
    $(".maintext2").fadeOut(function() {
    $(this).html(" responsive").fadeIn();
      });     
}, 4000);
 });

它将单词从“简单”和“干净”改为“漂亮”和“反应迅速”

但是我如何迭代特定的单词列表呢？ 比如说：

简洁

美丽而灵敏

动画与效果

少&多

---

然后回到1。再说一遍

像这样的方法会奏效：

$(function()
{
  var setTitle = function()
  {
    var title = Math.random().toFixed(2) + ' & ' + Math.random().toFixed(2);
    $('title').html(title);
  };

  setInterval(setTitle, 4000);
});

根据需要更改title变量。位于

的文档和示例无需重新发明车轮。 要获得链接页面上显示的确切效果，请使用下面显示的他们的方法（并直接从该网站获取，因此不是我的作品）

有两点值得注意：

可能有一些css在那里，你不需要，可能想检查一下

下面的功能取决于

var headerScenes=[{
“第一个单词”：“玩”，
“第二个单词”：“网格”，
“颜色”：“#fdf7c8”
}, {
“第一个单词”：“新鲜”，
“第二个单词”：“清楚”，
“颜色”：“fef0de”
}, {
“第一个词”：“性感”，
“第二个单词”：“固体”，
“颜色”：“ffc3b9”
}, {
“第一个单词”：“更少”，
“第二个词”：“更多”，
“颜色”：“ffe3d1”
}, {
“第一个单词”：“打印”，
“第二个词”：“网络”，
“颜色”：“#e1e1”
}, {
“第一个词”：“思考”，
“第二个单词”：“形状”，
“颜色”：“D2F0”
}, {
“第一个单词”：“你”，
“第二个词”：“我们”，
“颜色”：“d7faf2”
}];
函数addClass（a，b）{
a、 类列表？a.classList.add（b）：a.className+=“”+b
}
函数removeClass（a，b）{
返回？void（a.classList？a.classList.remove（b）：a.className&&（a.className=a.className.replace（new RegExp（（^ |\\b）“）+b.split（“”）。join（“|”）+”（\\b |$），“gi”），”）：！1
}
函数stringTyper（a、b、c、d）{
var e=这个，
f={
开始时间：0，
字符延迟：25，
返回模式：“word”，
字体方向：“正常”，
characterDelayStyle:“正常”，
characterDelayMin:60，
字符延迟最大值：200
};
_.延长（f，b）；
var g，h，i，j=a.分割（“”）；
this.loop=函数（a）{
g>=h&&（i=setTimeout（函数（）{
c（e.createReturn（h））；
var b=a；
“random”==f.characterDelayStyle&&（b=Math.floor（Math.random（）*（f.characterDelayMax-f.characterDelayMin））+f.characterDelayMin）、h++、e.loop（b）
}，a），h==g&&d&&d（）
}，this.createReturn=函数（b）{
var c=“”；
返回“reverse”==f.typeDirection&&（b=g-b-1），“character”==f.returnMode？c=j[b]：“word”==f.returnMode&&（c=a.substr（0，b+1）），c
}，this.pause=function（）{
清除超时（i）
}，this.resume=函数（）{
e、 循环（f.characterDelay）
}，this.reset=函数（）{
e、 init（）
}，this.init=函数（）{
g=j.长度，h=0，e.循环（f.字符延迟）
}，setTimeout（函数（）{
e、 init（）
}，f.startDelay）
}
磁头控制器=功能（）{
函数a（）{
headerScenePlayer.init（headerScenes）
}
返回{
init:a
}
}(),
headerScenePlayer=函数（）{
变量a，b=[]，
c=500，
d=1e3，
e=100，
f=5e3，
g=50，
h=100，
i=document.querySelector（“.js包装头”），
j=document.querySelector（“.js第一个单词”），
k=document.querySelector（“.js第二个单词”）；
return init=函数（d）{
a=0，b=d，i.style.backgroundColor=b[0]。颜色，设置超时（函数（）{
addClass（i，“动画”），游戏场景（Math.floor（Math.random（）*b.length））
}，c）
}，播放场景=功能（c）{
a=c，i.style.backgroundColor=b[c].color，showFirstWord（）
}，showFirstWord=函数（）{
新的stringTyper（b[a]。第一个字{
开始时间：100，
characterDelayStyle:“随机”，
characterDelayMin:g，
characterDelayMax:h
}，职能（a）{
j、 innerHTML=a
}，函数（）{
setTimeout（函数（）{
showSecondWord（）
}，e）
})
}，showSecondWord=函数（）{
新的stringTyper（b[a]。第二个字{
开始时间：100，
characterDelayStyle:“随机”，
characterDelayMin:g，
characterDelayMax:h
}，职能（a）{
k、 innerHTML=a
}，函数（）{
setTimeout（函数（）{
希德沃兹（）
}，f）
})
}，hideWords=函数（）{
新的stringTyper（b[a]。第一个字{
开始时间：100，
characterDelayStyle:“随机”，
字体方向：“反向”，
characterDelayMin:g，
characterDelayMax:h
}，职能（a）{
j、 innerHTML=a
}，函数（）{}），新的stringTyper（b[a]。第二个单词{
开始时间：300，
characterDelayStyle:“随机”，
字体方向：“反向”，
characterDelayMin:g，
characterDelayMax:h
}，职能（a）{
k、 innerHTML=a
}，nextScene）
}，start=function（）{}，stop=function（）{}，reset=function（）{}，nextScene=function（）{
var c=a+1；
c>=b.length&（c=0），setTimeout（函数（）{
游戏场景（c）
}，d）
}，prevScene=function（）{}{
init:init，
开始：开始，
停:停,，
重置：重置，
nextScene:nextScene，
prevScene：prevScene
}
}(),
headerController.init（）
。标题词{
字体系列：'C
<div class="header-words">
  <ul class="header-words__inner">
    <li class="first-word">simple</li>
    <li class="word-connector">&amp;</li>
    <li class="second-word">clean</li>
  </ul>
</div>

<script>
$(document).ready(function(){
    var text = ['fast', 'modern', 'beautiful'];
    var text2 = ['easy', 'classic', 'responsive'];    
        i = 0,
        $word1 = $('.first-word');
        $word2 = $('.second-word');

    setInterval(function ()
    {
        $word1.fadeOut(function () {
            $word1.text(text[i % text.length]).fadeIn();
        });
        $word2.fadeOut(function () {
            $word2.text(text2[i++ % text2.length]).fadeIn();
        });
    }, 4000);
});
</script>