使用jQuery在特定时间间隔显示和隐藏div
我想以特定的间隔（10秒）显示div，然后显示下一个div，然后继续并重复相同的操作。
**
序列 ：
**在第10秒显示div1时，隐藏其他div，在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>
问题答案：
此处的 工作示例 -在URL中添加/ edit 以与代码一起播放您只需要使用JavaScriptsetInterval)函数
$('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++;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>
编辑：
为了回应您对容器div的评论，只需对此进行修改
$('div','#container')
对此
$('#div1, #div2, #div3')
-
我想要一个像这样的Mp3播放器。我的搜索脚本显示每页10个结果。我想为每个搜索结果项插入一个mp3。 > 当我点击播放时，播放器正常打开，当我点击停止时，播放器正常停止，但是当我点击播放并在另一个结果上点击播放时，第一个没有停止，第二个打开正常... 当我点击“播放”时，我需要自动播放mp3；当我点击“停止”时，玩家必须停止。 HTML： 小提琴。
-
主要内容：实例,jQuery hide() 和 show(),实例,实例,实例,jQuery toggle(),实例隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！ 因为时间是宝贵的，我们提供快捷方便的学习方法。 在小牛知识库,你可以学习需要的知识。 实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和
-
我正在尝试操作上面的HTML代码示例。这是实际HTML代码的简化版本。 这个脚本隐藏了所有的div，类'row'位于两个div之间，这两个div被称为崩溃组和崩溃组。 但是，我只想在任何一行包含至少一个类为“label passive”的span时，隐藏类为“Row”的div元素。 当存在一个带有被动标签的范围时，仅仅隐藏任何行div是不够的。在这些collapsegroup div之外，可能有一
-
问题内容： 如果不使用JQuery，这可能吗？ 它用于移动网站，但是页面始终处于脱机状态，所以我真的不想使用jquery。与自定义CSS样式相比，为jquery mobile提供自定义样式要困难得多。 问题答案： 使用和输入 使所选项目保持打开状态并切换。 使用和命名输入 与复选框类似，它仅关闭已打开的复选框。在两个输入上 使用。 使用和 与输入类似，您还可以使用键触发状态。 在手风琴外部单击将关
-
本文向大家介绍jQuery控制元素隐藏和显示，包括了jQuery控制元素隐藏和显示的使用技巧和注意事项，需要的朋友参考一下 1、jQuery隐藏和显示效果 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素： 2、jQuery淡入淡出效果 通过 jQuery，您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法： fadeIn()
-
本文向大家介绍jQuery隐藏和显示效果实现，包括了jQuery隐藏和显示效果实现的使用技巧和注意事项，需要的朋友参考一下 实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示