我希望每隔2秒用一个数组中的单词替换带有“单词”字符的span中的文本
$('#words').delay(1000).fadeOut(1000);
$(this).delay(3000).text('word2').fadeIn(1000);
$(this).delay(5000).text('word3').fadeIn(1000);
$(this).delay(7000).text('word4').fadeIn(1000);
这就是我所拥有的,但显然它在7秒后停止工作..我怎么能重复这个?甚至用一个数组来保存单词..谢谢!
答案 0 :(得分:14)
您可以使用setInterval()
执行此操作:
$(function () {
count = 0;
wordsArray = ["Beta", "Gamma", "Delta", "Alpha"];
setInterval(function () {
count++;
$("#word").fadeOut(400, function () {
$(this).text(wordsArray[count % wordsArray.length]).fadeIn(400);
});
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="word">Alpha</div>
答案 1 :(得分:3)
使用Vanilla JS(没有jQuery的普通JS)很容易实现,如下所示。
创建一个setInterval()
循环,每2秒运行一次,并每次随机化以获得不同的数组元素。
var names = ['test1', 'test2', 'test3', 'test4'];
setInterval(function() {
var rand = Math.floor(Math.random() * 4);
document.getElementById("name").innerHTML = names[rand];
}, 2000);
<div id="name">test</div>
如果你想获得淡化效果(如评论中所述),你最好的选择就是使用jQuery。
答案 2 :(得分:0)
这是在网站上的两个句子之间交换的有效代码FR-> EN-> FR-> ...
js 基于@ praveen-kumar-purushothaman解决方案:
count = 0;
wordsArray = [
'Texte en français incluant des <strong>balises html</strong>.',
'Text in french including <strong>html tags</strong>.'
];
setInterval(function () {
count++;
$("#mytext").fadeOut(300, function() {
$(this).html(wordsArray[count % wordsArray.length]).fadeIn(500);
});
}, 5000);
html ,其第一文本以法语显示:
<h1 id="mytext">
Texte en français incluant des <strong>balises html</strong>.
</h1>
希望对您有所帮助。