问题描述
我想以特定间隔(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 函数
$('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.
**
**On 10th secondshow div1 , hide other divs ,
After 5seconds intervalShow div 2 and hide other divs,
After 5 seconds intervalShow div 3 and hide other divs,
and repeat the same for every 10 seconds.<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
setInterval
function$('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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!