定时文本交换
Timed text swap?
是否可以用javascript/jQuery交换一段文本?我想要一个大约5秒的延迟计时器,然后文本应该切换到其他内容,比如图像幻灯片。如果有渐变或效果的话会很棒,但不管怎样。你能给我指个正确的方向吗?或者帮我一下?
以下是如何在没有setTimeout或setInterval 的情况下循环
演示在这里
<div id="textMessage"></div>
<div class="textContent" style="display:none">Lorem ipsum dolor sit amet</div>
<div class="textContent" style="display:none">In sit amet diam et arcu aliquam tincidunt. </div>
function slide() {
if (cnt>=texts.length) cnt=0;
$('#textMessage').html(texts[cnt++]);
$('#textMessage')
.fadeIn('slow').animate({opacity: 1.0}, 3000).fadeOut('slow',
function() {
return slide()
}
);
}
$(document).ready(function() {
// save the texts in an array for re-use
$(".textContent").each(function() {
texts[cnt++]=$(this).text();
});
slide()
});
setTimeout(function() {
$('#target').html('New Text');
}, 5000); // <- 5 seconds
如果你想进一步
setInterval(function() {
// do some change that will happen every 5 seconds
}, 5000); // <- 5 seconds
开始
您可以使用setTimeout和调用函数
编辑:
这是经过调整的演示,没有点击和间隔
编辑2:
将代码复制粘贴到此处,以防jsfiddle出现故障。
<div class="texts">
<p class="text text_1">text 1</p>
<p class="text text_2">text 2</p>
</div>
<script>
setInterval(function(){
var toggle = $(".text").hasClass("toggled");
$(".text_1").animate({opacity: toggle ? 1 : 0});
$(".text_2").animate({opacity: toggle ? 0 : 1});
$(".text").toggleClass("toggled");
}, 1000);
</script>
<style type="text/css">
.texts {
position: relative;
}
.text {
position: absolute;
top: 0;
left: 0;
}
.text_1{
opacity: 1
}
.text_2{
opacity: 0;
}
</style>
function changeText(){
document.getElementById('my_div_id').innerHTML = 'text_to_display';
}
您可以实现changetext以获得一个字符串数组,在下一个函数中对其进行迭代
function timingex( ){
setTimeout("changeText()",5000);
}
将您想要淡入的内容(我们可以将其命名为#box
(放在<p>
的顶部。用display:none;
隐藏它。然后使用例如:
function() {
$("#box").delay(5000).fadeIn("slow");
}
相关文章:
- java脚本:交换技术,添加随机文本
- 如何单击和交换按钮中的文本
- Jquery 文本交换 - 多次使用问题
- JavaScript 交换文本块单击锚链接
- 使用jQuery交换输入字段占位符文本
- JavaScript Accordion文本交换
- 通过单击按钮交换两个自动文本框的值
- 用函数交换文本
- 将输入占位符文本与span文本jquery交换
- 在交换文本输入值时出现奇怪的错误
- Jquery点击事件交换文本不触发第一次点击,但工作后
- onmouseout在交换文本时出错
- 与子JavaScript/jQuery交换DOM元素中的文本
- jQuery .click() /内(“click" . .)我需要帮助交换文本交替点击
- 用javascript交换2个文本框中的值
- Select2:在多个Select2中交换文本和值
- Raphaël.js -在文本中交换字符(动画)
- 交换文本标签以选择值
- JS检查网站的类名和交换文本的颜色
- 使用Javascript如何交换文本框的id