用 jquery 时间后更改 header 个单词

Question

我想为我网站上的 header 字词设置动画，使其每 4 秒更改一次文本。结构应该总是这样："XY" & "ZZ"，其中 XY 和 ZZ 变成不同的词，连接符“&”总是保持在相同的位置。

我看到了这个效果here。

你会怎么做？

这是我的：

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

将单词从 "simple" & "clean" 更改为 "beautiful" & "responsive"。

但是我如何遍历特定的单词列表？比方说：

简单干净
美观且响应迅速
动画和效果
少而多

然后再次回到 1.。

Answer 1

像这样的东西会起作用：

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

  setInterval(setTitle, 4000);
});

根据需要更改标题变量。 http://www.w3schools.com/jsref/met_win_setinterval.asp

中的文档和示例

Answer 2

无需重新发明轮子。

要获得您 link 页面上显示的确切效果，请使用下面显示的 他们的 方法（并直接从该站点提取，因此不是我的工作）

注意两点：

其中可能有一些您不需要的 css，可能需要检查一下
下面的函数依赖于underscore.js

var headerScenes = [{
    "first_word": "Play",
    "second_word": "Grid",
    "color": "#fdf7c8"
}, {
    "first_word": "Fresh",
    "second_word": "Clear",
    "color": "#fef0de"
}, {
    "first_word": "Sexy",
    "second_word": "Solid",
    "color": "#ffc3b9"
}, {
    "first_word": "Less",
    "second_word": "More",
    "color": "#ffe3d1"
}, {
    "first_word": "Print",
    "second_word": "Web",
    "color": "#e1e1e1"
}, {
    "first_word": "Think",
    "second_word": "Shape",
    "color": "#d2f0f0"
}, {
    "first_word": "You",
    "second_word": "Us",
    "color": "#d7faf2"
}];


function addClass(a, b) {
    a.classList ? a.classList.add(b) : a.className += " " + b
}
function removeClass(a, b) {
    return a ? void(a.classList ? a.classList.remove(b) : a.className && (a.className = a.className.replace(new RegExp("(^|\b)" + b.split(" ").join("|") + "(\b|$)", "gi"), " "))) : !1
}
function stringTyper(a, b, c, d) {
    var e = this,
        f = {
            startDelay: 0,
            characterDelay: 25,
            returnMode: "word",
            typeDirection: "normal",
            characterDelayStyle: "normal",
            characterDelayMin: 60,
            characterDelayMax: 200
        };
    _.extend(f, b);
    var g, h, i, j = a.split("");
    this.loop = function(a) {
        g >= h && (i = setTimeout(function() {
            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 = function(b) {
        var c = "";
        return "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() {
        clearTimeout(i)
    }, this.resume = function() {
        e.loop(f.characterDelay)
    }, this.reset = function() {
        e.init()
    }, this.init = function() {
        g = j.length, h = 0, e.loop(f.characterDelay)
    }, setTimeout(function() {
        e.init()
    }, f.startDelay)
}

headerController = function () {
    function a() {
        headerScenePlayer.init(headerScenes)
    }
    return {
        init: a
    }
}(),
headerScenePlayer = function () {
    var a, b = [],
        c = 500,
        d = 1e3,
        e = 100,
        f = 5e3,
        g = 50,
        h = 100,
        i = document.querySelector(".js-wrapper-header"),
        j = document.querySelector(".js-first-word"),
        k = document.querySelector(".js-second-word");
    return init = function (d) {
        a = 0, b = d, i.style.backgroundColor = b[0].color, setTimeout(function () {
            addClass(i, "animate"), playScene(Math.floor(Math.random() * b.length))
        }, c)
    }, playScene = function (c) {
        a = c, i.style.backgroundColor = b[c].color, showFirstWord()
    }, showFirstWord = function () {
        new stringTyper(b[a].first_word, {
            startDelay: 100,
            characterDelayStyle: "random",
            characterDelayMin: g,
            characterDelayMax: h
        }, function (a) {
            j.innerHTML = a
        }, function () {
            setTimeout(function () {
                showSecondWord()
            }, e)
        })
    }, showSecondWord = function () {
        new stringTyper(b[a].second_word, {
            startDelay: 100,
            characterDelayStyle: "random",
            characterDelayMin: g,
            characterDelayMax: h
        }, function (a) {
            k.innerHTML = a
        }, function () {
            setTimeout(function () {
                hideWords()
            }, f)
        })
    }, hideWords = function () {
        new stringTyper(b[a].first_word, {
            startDelay: 100,
            characterDelayStyle: "random",
            typeDirection: "reverse",
            characterDelayMin: g,
            characterDelayMax: h
        }, function (a) {
            j.innerHTML = a
        }, function () {}), new stringTyper(b[a].second_word, {
            startDelay: 300,
            characterDelayStyle: "random",
            typeDirection: "reverse",
            characterDelayMin: g,
            characterDelayMax: h
        }, function (a) {
            k.innerHTML = a
        }, nextScene)
    }, start = function () {}, stop = function () {}, reset = function () {}, nextScene = function () {
        var c = a + 1;
        c >= b.length && (c = 0), setTimeout(function () {
            playScene(c)
        }, d)
    }, prevScene = function () {}, {
        init: init,
        start: start,
        stop: stop,
        reset: reset,
        nextScene: nextScene,
        prevScene: prevScene
    }
}(),



headerController.init();

.header-word {
    font-family:'Circular-Bold';
    font-size:135px
}
.header-intro {
    font-size:22px;
    line-height:1.3em
}
.flyout__form {
    font-size:15px;
    line-height:1.35em
}
.flyout__form input {
    font-size:16px
}
.flyout__form .bnt {
    font-size:16px
}
.navigation__main {
    font-size:18px
}
.responsive-navigation__label {
    font-size:22px
}
.wrapper__footer, .page-footer-row__column {
    font-size:16px;
    line-height:1.35em
}
.overlay__label {
    font-size:18px
}
.project-categories {
    font-size:15px
}
.text-block h3, .text-block table td, .text-block table .label {
    font-size:20px
}
.text-block-smaller {
    font-size:18px;
    line-height:1.40em
}
.text-block-smaller h3 {
    margin-bottom:21px;
    font-size:18px
}
.text-block .label {
    font-size:15px
}
.header-contact__column {
    font-size:18px;
    line-height:1.40em
}
@media (max-width: 767px) {
    body, .text-block h3 {
        font-size:18px;
        line-height:1.40em
    }
    .wrapper__footer, .page-footer-row__column {
        font-size:15px;
        line-height:1.35em
    }
    .text-row-colophon, .text-block table td, .text-block table .label {
        font-size:16px;
        line-height:1.40em
    }
    .header-word {
        font-size:63px
    }
    .header-intro {
        font-size:18px;
        line-height:1.3em
    }
}
* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.header-home {
    position:relative;
    display:none
}
body.home .header-menu__container {
    position:relative;
    height:40px;
    width:100%
}
body.home .header-layer {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px
}
body.home .header-layer .inner {
    margin:0 auto;
    height:100%;
    max-width:1200px;
    text-align:center
}
body.home .header-layer .header-intro {
    margin:0 auto;
    max-width:680px
}
body.home .wrapper__header {
    display:block;
    background-color:white;
    top:0px;
    color:#000000
}
body.home .wrapper__header .header-logo {
    top:36px;
    width:200px;
    height:40px;
    background-image:url("../images/layout/g&h_logo.svg");
    display:block;
    position:absolute;
    left:50%;
    margin-left:-100px
}
body.home .wrapper__header .inner {
    position:relative
}
body.home .wrapper__header .header-content {
    position:absolute;
    width:100%;
    top:50%;
    -ms-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    transform:translateY(-50%)
}
body.home .wrapper__header .icon_arrow-down {
    display:block;
    width:26px;
    height:36px;
    background-image:url("../images/layout/icon_arrow-down.svg");
    position:absolute;
    bottom:64px;
    left:50%;
    margin-left:-13px
}
body.home .wrapper__header.animate {
    -webkit-transition:background-color 3s ease, -webkit-transform 0.3s ease;
    -moz-transition:background-color 3s ease, -moz-transform 0.3s ease;
    -o-transition:background-color 3s ease, -o-transform 0.3s ease;
    transition:background-color 3s ease, transform 0.3s ease
}
.header-words {
    width:100%;
    height:143px;
    float:left;
    text-align:center
}
.header-words .header-words__inner {
    padding:0;
    margin:0;
    list-style:none
}
.header-words .header-words__inner li {
    height:135px;
    float:left;
    display:block;
    width:10%
}
.header-words .header-words__inner li:first-child {
    width:45%;
    text-align:right
}
.header-words .header-words__inner li:last-child {
    width:45%;
    text-align:left
}
@media (max-width: 991px) {
    .icon_arrow-down {
        bottom:20px !important
    }
    .header-content {
        position:absolute;
        width:100%
    }
    .header-intro {
        margin:0 auto;
        max-width:440px;
        margin-top:40px !important
    }
    .header-words {
        padding-left:20px;
        padding-right:20px;
        width:auto;
        height:auto;
        float:none
    }
    .header-words .header-words__inner {
        padding:0;
        margin:0;
        list-style:none
    }
    .header-words .header-words__inner li {
        height:auto;
        float:none;
        width:auto;
        display:inline-block;
        line-height:1em
    }
    .header-words .header-words__inner li:first-child {
        height:135px;
        display:block;
        width:100%;
        text-align:center
    }
    .header-words .header-words__inner li:last-child {
        width:auto
    }
}
@media (max-width: 767px) {
    .header-intro {
        margin:0 auto;
        max-width:90% !important
    }
    .header-words .header-words__inner li:first-child {
        height:63px
    }
}
@media (max-height: 420px) {
    .header-logo {
        top:10px !important
    }
    .header-intro {
        margin:0 auto;
        max-width:90% !important;
        margin-top:5px !important
    }
    .icon_arrow-down {
        bottom:10px !important
    }
}
.text-row-clients-partners {
    margin-top:60px
}
.project-row {
    transition:height .3s ease
}
.project-row .project-thumb {
    margin-bottom:20px
}
@media (max-width: 767px) {
    .text-row-clients-partners {
        margin-top:20px
    }
    .text-row-clients-partners .text-block {
        margin-bottom:20px
    }
}
.page-template-template-contact .mobile-contact__column {
    display:none
}
.page-template-template-contact .text-row-colophon>.text-block:first-child {
    display:none
}
.page-template-template-contact .text-row-colophon>.text-block {
    position:relative;
    float:left;
    width:100%;
    min-height:1px;
    padding-left:10px;
    padding-right:10px;
    position:relative;
    float:left;
    width:50%;
    min-height:1px;
    padding-left:10px;
    padding-right:10px;
    position:relative;
    min-height:1px;
    padding-left:10px;
    padding-right:10px
}
@media (min-width: 992px) {
    .page-template-template-contact .text-row-colophon>.text-block {
        float:left;
        width:100%
    }
}
.page-template-template-contact .text-row-colophon table .label {
    width:40%
}
.page-template-template-contact .text-row-colophon>.text-block:last-child {
    position:relative;
    float:left;
    width:100%;
    min-height:1px;
    padding-left:10px;
    padding-right:10px;
    position:relative;
    min-height:1px;
    padding-left:10px;
    padding-right:10px;
    position:relative;
    min-height:1px;
    padding-left:10px;
    padding-right:10px
}
@media (min-width: 768px) {
    .page-template-template-contact .text-row-colophon>.text-block:last-child {
        float:left;
        width:50%
    }
}
@media (min-width: 992px) {
    .page-template-template-contact .text-row-colophon>.text-block:last-child {
        float:left;
        width:100%
    }
}
.page-template-template-contact .text-row-colophon>.text-block:last-child .text-block {
    position:relative;
    float:left;
    width:100%;
    min-height:1px;
    padding-left:10px;
    padding-right:10px;
    position:relative;
    min-height:1px;
    padding-left:10px;
    padding-right:10px
}
@media (min-width: 992px) {
    .page-template-template-contact .text-row-colophon>.text-block:last-child .text-block {
        float:left;
        width:50%
    }
}
@media (max-width: 767px) {
    .page-template-template-contact .page__header .header-contact__column:last-child {
        margin-bottom:5px
    }
    .page-template-template-contact .text-row-colophon h3 {
        margin-bottom:17px !important
    }
}
@media (max-width: 991px) {
    .page-template-template-contact .column-company {
        display:none
    }
    .page-template-template-contact .mobile-contact__column {
        display:block
    }
    .page-template-template-contact .header-contact__column {
        margin-bottom:20px
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .page-template-template-contact .text-row-colophon>.text-block:first-child {
        display:block
    }
    .page-template-template-contact .mobile-contact__column {
        display:none
    }
}
.header-contact {
    margin-left:-10px;
    margin-right:-10px
}
.header-contact:before, .header-contact:after {
    content:" ";
    display:table
}
.header-contact:after {
    clear:both
}
.header-contact__column {
    position:relative;
    float:left;
    width:100%;
    min-height:1px;
    padding-left:10px;
    padding-right:10px;
    position:relative;
    min-height:1px;
    padding-left:10px;
    padding-right:10px;
    position:relative;
    min-height:1px;
    padding-left:10px;
    padding-right:10px
}
.header-contact__column .inner {
    position:relative;
    width:100%;
    height:0;
    padding-bottom:136.84211%;
    background-color:black;
    color:white
}
.header-contact__column .inner a, .header-contact__column .inner a:hover, .header-contact__column .inner a:visited, .header-contact__column .inner a:active, .header-contact__column .inner a:link {
    color:white
}
.header-contact__column .inner img {
    height:100%;
    width:auto
}
.header-contact__column.column-company .inner-content {
    padding:30px
}
.header-contact__column .contact-column__image {
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px
}
.header-contact__column .team-icon-arrow {
    position:relative;
    display:inline-block;
    width:22px;
    height:2px
}
.header-contact__column .team-icon-arrow:before {
    opacity:1;
    display:block;
    content:'';
    position:absolute;
    width:22px;
    height:15px;
    top:-10px;
    left:5px;
    background-image:url("../images/layout/icon_arrow-right-white.svg");
    -webkit-transition-delay:0;
    -moz-transition-delay:0;
    -o-transition-delay:0;
    -ms-transition-delay:0;
    transition-delay:0;
    -webkit-transition:opacity 0.3s ease;
    -moz-transition:opacity 0.3s ease;
    -o-transition:opacity 0.3s ease;
    -ms-transition:opacity 0.3s ease;
    transition:opacity 0.3s ease
}
.header-contact__column .contact-column__overlay {
    position:absolute;
    width:100%;
    z-index:2;
    padding:30px;
    height:100%;
    background-color:transparent;
    -webkit-transition-delay:0;
    -moz-transition-delay:0;
    -o-transition-delay:0;
    -ms-transition-delay:0;
    transition-delay:0;
    -webkit-transition:background-color 0.3s ease;
    -moz-transition:background-color 0.3s ease;
    -o-transition:background-color 0.3s ease;
    -ms-transition:background-color 0.3s ease;
    transition:background-color 0.3s ease
}
.header-contact__column .member-details {
    opacity:0;
    -webkit-transition-delay:0;
    -moz-transition-delay:0;
    -o-transition-delay:0;
    -ms-transition-delay:0;
    transition-delay:0;
    -webkit-transition:opacity 0.3s ease;
    -moz-transition:opacity 0.3s ease;
    -o-transition:opacity 0.3s ease;
    -ms-transition:opacity 0.3s ease;
    transition:opacity 0.3s ease
}
.header-contact__column:hover .team-icon-arrow:before {
    opacity:.3
}
.header-contact__column:hover .contact-column__overlay {
    background-color:rgba(0, 0, 0, 0.75)
}
.header-contact__column:hover .member-details {
    opacity:1
}
.header-contact__column.mobile-contact__column .inner {
    background-color:white;
    color:black;
    height:auto;
    padding-bottom:0px
}
.header-contact__column.mobile-contact__column .inner a, .header-contact__column.mobile-contact__column .inner a:hover, .header-contact__column.mobile-contact__column .inner a:active, .header-contact__column.mobile-contact__column .inner a:visited, .header-contact__column.mobile-contact__column .inner a:link {
    color:black
}
@media (min-width: 768px) {
    .header-contact__column {
        float:left;
        width:50%
    }
}
@media (min-width: 992px) {
    .header-contact__column {
        float:left;
        width:33.33333%
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<div class="wrapper__outer wrapper__header js-wrapper-header animate" style="height: 514px; background-color: rgb(215, 250, 242);">
    <div class="wrapper-content">
        <div class="header-layer js-header-layer">
            <div class="inner">
                <div class="header-logo"></div>
                <div class="header-content">
                    <div class="header-words">
                        <ul class="header-words__inner">
                            <li class="header-word header-first-word js-first-word">You</li>
                            <li class="header-word header-word-connector">&amp;</li>
                            <li class="header-word header-second-word js-second-word">Us</li>
                        </ul>
                    </div>
                    <div class="header-intro">
                        <p>Creatief &amp; effectief, bevlogen&nbsp;&amp; ambitieus, analytisch&nbsp;&amp; intuïtief.
                            <br>We zijn een jonge&nbsp;grafisch ontwerpstudio, gespecialiseerd in identiteit en communicatie voor print en web.</p>
                    </div>
                </div>
                <div class="icon_arrow-down js-scroll-down"></div>
            </div>
        </div>
    </div>
</div>

Answer 3

所以我想通了。花了一段时间，它可能不是最好的解决方案。但它完全按照我想要的方式工作。

HTML

<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>

jquery

<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>

如果有人有更好的解决方案，我会很高兴听到！

用 jquery 时间后更改 header 个单词

Change header words after time with jquery

javascript

jquery

text

replace

jquery-animate

无需重新发明轮子。

注意两点：