一次只显示一个数组项（Javascript）

Question

我将尽力为您提供翻译。以下是需要翻译的内容：

我想要创建一个滚动文字的效果，它会从一个数组中取出一个字符串并进行显示。基本上，我只想显示一个字符串，然后过渡到下一个。我的JavaScript技能非常基础（使用Jquery可能更好）。

以下是我的代码：

var title= ['Orange', 'Apple', 'Mango', 'Airplane', 'Kiwi'];
for (var i=0; i<title.length; i++){
document.write(title[i]);
}

我需要添加什么？

非常感谢！

- Isaac Nelson

---

"我的JavaScript技能非常基础" vs. "在这种情况下，使用jQuery可能更好。" 不！首先要掌握语言，然后再使用框架来摆脱所有不良因素。此外，目前你只是一次性编写所有内容。你应该学习DOM操作。" - Zeta

不要使用document.write，了解如何使用innerHTML。 - Diodeus - James MacFarlane

Answer 1

首先学习 document.getElementById 和 setInterval。

http://jsfiddle.net/wtNhf/

HTML：

<span id="fruit"></span>

Javascript:

var title = ['Orange', 'Apple', 'Mango', 'Airplane', 'Kiwi'];

var i = 0;  // the index of the current item to show

setInterval(function() {            // setInterval makes it run repeatedly
    document
        .getElementById('fruit')
        .innerHTML = title[i++];    // get the item and increment i to move to the next
    if (i == title.length) i = 0;   // reset to first element if you've reached the end
}, 1000);                           // 1000 milliseconds == 1 second

- Trevor Dixon

Answer 2

http://jsfiddle.net/3fj9E/1/

js

 var span = $('span');
 var div = 0;
 var fading_in = function () {
 $(span[div++] || []).fadeIn(500, arguments.callee);
 }
setTimeout(fading_in, 400);

html

 <div id='example'>
 <span>orange </span>
 <span>apple </span>
 <span>kiwi </span>
<span>banana </span>
<span> melon</span>
</div>

CSS

 span {display:none}

- James Daly

---

这是一种不同的方式，用于处理实质上在DOM数组中的HTML元素，而不是使用setInterval。 - James Daly

Answer 3

我试图将它保持在最简单的状态

HTML

<div id="my_id"></div>

JavaScript

var counter = 0;
var words = ['jaja', 'jojo', 'lol', 'troll', 'pk!'];
var my_div = document.getElementById('my_id');

function next_word()
{
    my_div.innerHTML = words[counter % words.length];
    counter += 1;
}

setInterval(next_word, 100);

http://jsfiddle.net/zTLqe/

- bgusach