【问题标题】:Add loop to typewriter text Jquery将循环添加到打字机文本 Jquery
【发布时间】:2013-10-01 21:09:05
【问题描述】:

我是一个 jquery nube,我有这个打字机文本显示我想要的方式,但是当所有单词都用完后,我需要循环回到开头。任何人都可以帮助我的代码。

这是我所拥有的:

$(function() {
    var ch = 0;
    var item = 0;
    var items = $('#caption li').length;
    var time = 2000;
    var delay = 28;
    var wait = 3000
    var tagOpen = false;

$('#showCaption').css('width', ($('#caption').width()));

function tickInterval() {
    if(item < items) {
        var text = $('#caption li:eq('+item+')').html();
        type(text);
        text = null;
        var tick = setTimeout(tickInterval, time);
    } else {
        clearTimeout(tick);
    }
}

function type(text) {
    time = delay;
    ch++;
    if(text.substr((ch - 1), 1) == '<') {
        if(text.substr(ch, 1) == '/') {
            tagOpen = false;
        }
        var tag = '';
        while(text.substr((ch - 1), 1) != '>') {
            tag += text.substr((ch - 1), 1);
            ch++;
        }
        ch++;
        tag += '>';
        var html = /\<[a-z]+/i.exec(tag);
        if(html !== null) {
            html = html[0].replace('<', '</') + '>';
            tagOpen = html;
        }
    }
    if(tagOpen !== false) {
        var t = text.substr(0, ch) + tagOpen;
    } else {
        var t = text.substr(0, ch);
    }

    $('#showCaption').html(t);
    if(ch > text.length) {
        item++;
        ch = 0;
        time = wait;
    }
}

var tick = setTimeout(tickInterval, time);
});

如果您需要 html,请告诉我。

提前致谢

【问题讨论】:

    标签: jquery loops text jquery-animate


    【解决方案1】:

    只需重新启动您的计数器:

    function tickInterval() {
        if (item >= items)
        {
          ch = 0;
          item = 0;
        }
    
        var text = $('#caption li:eq('+item+')').html();
        type(text);
    
        setTimeout(tickInterval, time);
    }
    

    示例:http://codepen.io/paulroub/pen/AgsuF

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-05-23
      • 2020-03-25
      • 1970-01-01
      • 2015-10-06
      • 1970-01-01
      • 2017-05-01
      • 1970-01-01
      • 2011-02-22
      相关资源
      最近更新 更多