Javascript 文本幻灯片
Posted
技术标签:
【中文标题】Javascript 文本幻灯片【英文标题】：Javascript Text Slideshow 【发布时间】：2013-10-04 22:35:36 【问题描述】：我正在尝试使用 javascript 和/或 jQuery 将文本添加到 div 中，然后每隔 10 秒将该文本更改为不同的文本 - 这有点像纯文本的幻灯片。这是我的代码：
<div id="textslide"><p></p></div>
<script>
var quotes = new Array();
quotes[0] = "quote1";
quotes[1] = "quote2";
quotes[2] = "quote3";
quotes[3] = "quote4";
quotes[4] = "quote5";
var counter = 0;
while (true)
if (counter > 4) counter = 0;
document.getElementById('textslide').firstChild.innerhtml = quotes[counter];
counter++;
setTimeout( // not sure what to put here, 500); // Want to delay loop iteration
</script>
【问题讨论】：
setTimeout 的第一个参数是一个函数。 setTimeout 只是递归地调用该函数。所以在你的情况下，只需将js代码放在一个函数中，然后将该函数的名称写为第一个arg。
【参考方案1】：
HTML：
<div id="textslide"><p></p></div>
JavaScript/jQuery：
var quotes = [
"quote1",
"quote2",
"quote3",
"quote4",
"quote5",
];
var i = 0;
setInterval(function()
$("#textslide").html(quotes[i]);
if (i == quotes.length)
i = 0;
else
i++;
, 10 * 1000);
Working demo here
【讨论】：
【参考方案2】：这是一个简单的 JS 建议
function loop()
if (counter > 4) counter = 0;
document.getElementById('textslide').firstElementChild.innerHTML = quotes[counter];
counter++;
setTimeout(loop, 500);
loop();
演示here
如果你想使用 jQuery 你可以使用这个：$('#textslide p:first').text(quotes[counter]);
演示here
【讨论】：
【参考方案3】：而不是while，使用：
setInterval(function ()
//do your work here
, 10000);
【讨论】：
不是setIntervale，而是setInterval。【参考方案4】：使用一个函数并在 body onload 上调用它
<html>
<head>
<script>
var counter = 0;
function changeText()
var quotes = new Array();
quotes[0] = "quote1";
quotes[1] = "quote2";
quotes[2] = "quote3";
quotes[3] = "quote4";
quotes[4] = "quote5";
if (counter > 4)
counter = 0;
document.getElementById("textslide").innerHTML = quotes[counter];
setTimeout(function()changeText(),10000);
counter ++;
</script>
</head>
<body onload="changeText();">
<p id="textslide"></p>
</body>
</html>
【讨论】：
以上是关于Javascript 文本幻灯片的主要内容，如果未能解决你的问题，请参考以下文章