所以我有这段代码可以在刷新时修改 div 的内容。
但我还希望它在设定的时间内淡入和淡出新的随机文本。我不知道从哪里开始这是我的原始代码:
HTML:
<div id="logo" class="container">
<h1>InsiderIndy</h1>
<p id="myQuote">Slogan</p>
</div>
JavaScript:
<script type="text/javascript">
var myQuotes = new Array();
myQuotes[0] = "Quote1";
myQuotes[1] = "Quote2";
myQuotes[2] = "Quote3"
myQuotes[3] = "Quote4"
myQuotes[4] = "Quote5"
myQuotes[5] = "Quote6"
var myRandom = Math.floor(Math.random()*myQuotes.length);
$('#myQuote').html(myQuotes[myRandom]);
</script>
有什么想法吗?谢谢! :)
最佳答案
完整的工作示例,具有渐变速度、旋转之间的暂停时间和起始位置的可调功能。到达终点时也返回起点:
编辑:我第一次读你的问题太快了,写了一个顺序轮换的函数。我更新了我的答案以包含两个函数——一个用于顺序轮换 startSeq()
,另一个用于随机轮换 startRandom()
。
function startSeq(i,iSpeed, iPause) {
$('#myQuote').html(myQuotes[i]);
$('#myQuote').fadeIn(iSpeed,function() {
setTimeout(function() {
$('#myQuote').fadeOut(iSpeed,function() {
setTimeout(function() {
if (i++ == myQuotes.length) i =0;
startSeq(i,iSpeed,iPause);
},iPause);
});
},iPause);
});
}
function startRandom(iSpeed, iPause) {
var i = Math.floor(Math.random()*myQuotes.length);
$('#myQuote').html(myQuotes[i]);
$('#myQuote').fadeIn(iSpeed,function() {
setTimeout(function() {
$('#myQuote').fadeOut(iSpeed,function() {
setTimeout(function() {
startRandom(iSpeed,iPause);
},iPause);
});
},iPause);
});
}
//startSeq(0,1000,1000);
startRandom(1000,1000);
关于javascript - 如何使用 javascript 制作淡入/淡出标语,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14594270/