javascript - 动态改变网站中的单词

Question

我想知道如何循环浏览一系列单词，以便它们每隔 5 秒左右就改变一次。有没有办法做到这一点？（我希望它会涉及 JavaScript）

效果可以看这里：http ://www.tivix.com/

Answer 1

这很简单，不需要jQuery

__这是一个例子__

var words = ['hello world', 'foo bar', 'john smith', 'my name'], // 1
    element = document.body, // 2
    currentWord = -1; //3

window.setInterval(function(){ // 4
   currentWord++; // 5
   if(currentWord > words.length) currentWord = 0; // 6
   element.textContent = words[currentWord]; // 7
}, 5000); // -- 4 

---

JSFiddle 演示链接

---

脚步

1. 这只是一个单词数组
2. 单词将进入的元素
3. 当前单词的索引。设置为 -1 因为我们将在更改文本之前添加 1
4. 创建一个每 5000 毫秒（5 秒）循环一次的函数
5. 增加 currentWord ( + 1)
6. 如果 currentWord ( index ) 是大于 words 数组长度的数字然后将其设置回默认值 ( 0 )
7. 将元素文本设置为当前单词

---

现在，如果您希望它是随机的，那么它会略有不同

__这是一个例子__

var words = ['hello world', 'foo bar', 'john smith', 'my name'], // 1
    element = document.body, // 2
    currentWord = 0; // 3

var getRandom = function() { // 4
    return parseInt(Math.random()*words.length); // 5
}; //  -- 4


window.setInterval(function(){ // 6
    var newWord = getRandom(); // 7
    while(newWord === currentWord) newWord = getRandom(); // 8
    currentWord = newWord; // 9
   element.textContent = words[currentWord]; // 10
}, 5000); // -- 6

---

JSFiddle 演示链接

---

脚步

1. 这只是一个单词数组
2. 单词将进入的元素
3. 当前单词的索引。
4. 创建一个返回随机数的函数
5. 获得一个随机数和时间是由单词数组的长度 - 解析它。
6. 创建一个每 500 毫秒（5 秒）循环一次的函数
7. 创建一个保存新词索引的变量
8. 如果 newWord 编号与 currentWord 相同，则尝试另一个随机数
9. 将 currentWord 设置为 newWord 的值
10. 将元素文本设置为新单词

Answer 2

5Yea, it's pretty easy in jQuery

You can create an array of the words you want interchanged like so:

var words = new Array('word1','word2','word3');

Then you can set an interval to constantly loop through the array.

var i = 0;
setInterval( function(){
    $( '#wordDiv' ).empty().append( words[ i ] );
    if( i < words.length ) {
        i++;
    } else {
        i = 0;
    }
}, 5000 );

So what the interval does is it will loop forever (unless you choose to break it), with a break of 5 seconds (5000 milliseconds) between each iteration. The i counter is used to point to the next array position: i++ (if there is one - if not it will move back to the start of the array i = 0).

If you want this in javascript without jquery just say.