0

我现在正在建立一个网站，其中有一个介绍性部分，说明“我是一个 [角色]”。我想要做的是声明一个角色列表（即网页设计师、UX 开发人员、图形设计师等），并让 [role] 中的文本自动循环遍历每个角色。

类似于：

HTML：

<p>Hi there I'm a <span id="role"></div>.</p>

jQuery：

$(document).ready(function(){
    $('#role').html('web designer').delay(400).html('graphic designer')
    .delay(400).html('UX developer');
});

我知道这是一个解决方案，但我怎样才能通过首先声明一个“角色”列表然后让 html 循环通过列表来实现这一点？

谢谢

4

2 回答 2

5

尝试使用setInterval()和数组操作的简单解决方案

jQuery(function($){
    var roles = ['role 1', 'role 2', 'role 3'];
    //used to determine which is the next roles to be displayed
    var counter = 0;
    var $role = $('#role')
    //repeat the passed function at the specified interval - it is in milliseconds
    setInterval(function(){
        //display the role and increment the counter to point to next role
        $role.text(roles[counter++]);
        //if it is the last role in the array point back to the first item
        if(counter >= roles.length){
            counter = 0;
        }
    }, 400)
})

演示：小提琴

于 2013-09-03T02:51:59.927 回答
0

Fiddle 是为了解决这个问题。

$(document).onReady( function () { 
    var roles = [ 'web designer', 'graphic designer', 'UX developer' ];
    var roleId = 0;

    window.setInterval(function () {
        $('#role').html(roles[roleId]);
        roleId = roleId + 1;
        if(roleId >= roles.length) { roleId = 0; }
    }, 1000);
});

我使用 setInterval() 使列表不断重复，但这当然是可选的。您可以将角色定义为数组并在计时器上遍历它们。如果您只想循环一次，则可以使用 for 循环。

于 2013-09-03T02:54:45.327 回答