使用jQuery以特定的时间间隔显示和隐藏div [英] Show and hide divs at a specific time interval using jQuery
问题描述
我想以特定间隔（10秒）显示div，并显示下一个div，然后重复同样的操作。
**
顺序：
**
第10秒
显示div1，隐藏其他divs，
5秒后的间隔
显示div 2并隐藏其他div，
5秒间隔后
显示div 3并隐藏其他div，
，并每10秒重复一次。
代码关注：
< div id ='div1'style =display：none;>
<！ - content - >
< / div>
< div id ='div2'style =display：none;>
<！ - content - >
< / div>
< div id ='div3'style =display：none;>
<！ - content - >
< / div>
工作示例 此处 - 添加 / edit 到代码
$ b
您只需使用JavaScript setInterval 函数
$（'html'）。addClass（'js'）;
$（function（）{
var timer = setInterval（showDiv，5000）;
var counter = 0;
function showDiv（）{
if（counter == 0）{counter ++; return;}
$（'div'，'＃container'）
.stop （）
.hide（）
.filter（function（）{return this.id.match（'div'+ counter）;}）
.show（'fast'）;
counter == 3？counter = 0：counter ++;
}
}）;
和HTML
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd>
< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =enlang =en>
< head>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js>< / script>
< title> Sandbox< / title>
< meta http-equiv =Content-typecontent =text / html; charset = utf-8/>
< style type =text / cssmedia =screen>
body {background-color：#fff; font：16px Helvetica，Arial;颜色：＃000; }
.display {width：300px; height：200px; border：2px solid＃000; }
.js .display {display：none; }
< / style>
< / head>
< body>
< h2>使用setInterval触发Div的显示示例< / h2>
< p>第一个div将在10秒后显示...< / p>
< div id ='container'>
< div id ='div1'class ='display'style =background-color：red;>
div1
< / div>
< div id ='div2'class ='display'style =background-color：green;>
div2
< / div>
< div id ='div3'class ='display'style =background-color：blue;>
div3
< / div>
< div>
< / body>
< / html>
编辑：
响应您对容器div的评论，只需修改
$（'div'，'＃container' ）
到此
$（'＃div1，＃div2，＃div3'）
I would like to show divs at a specific interval (10 seconds) and show next div and as go on and repeat the same.
**
Sequence :
** On 10th second show div1 , hide other divs ,
After 5seconds interval Show div 2 and hide other divs,
After 5 seconds interval Show div 3 and hide other divs,
and repeat the same for every 10 seconds.
Code Follows:
<div id='div1' style="display:none;"> <!-- content --> </div> <div id='div2' style="display:none;"> <!-- content --> </div> <div id='div3' style="display:none;"> <!-- content --> </div>
解决方案Working Example here - add /edit to the URL to play with the code
You just need to use JavaScript
setIntervalfunction$('html').addClass('js'); $(function() { var timer = setInterval( showDiv, 5000); var counter = 0; function showDiv() { if (counter ==0) { counter++; return; } $('div','#container') .stop() .hide() .filter( function() { return this.id.match('div' + counter); }) .show('fast'); counter == 3? counter = 0 : counter++; } });and the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>Sandbox</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; } .display { width:300px; height:200px; border: 2px solid #000; } .js .display { display:none; } </style> </head> <body> <h2>Example of using setInterval to trigger display of Div</h2> <p>The first div will display after 10 seconds...</p> <div id='container'> <div id='div1' class='display' style="background-color: red;"> div1 </div> <div id='div2' class='display' style="background-color: green;"> div2 </div> <div id='div3' class='display' style="background-color: blue;"> div3 </div> <div> </body> </html>EDIT:
In response to your comment about the container div, just modify this
$('div','#container')to this
$('#div1, #div2, #div3')
这篇关于使用jQuery以特定的时间间隔显示和隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
