从列表中自动更改div中的文本

Question

我目前正在建立一个网站，其中有一个介绍性部分，说明“我是 [角色]”。我想要做的是声明一个角色列表（即，网页设计师、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 循环遍历列表来实现这一点？

谢谢

Answer 1

尝试使用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)
})

演示：小提琴