javascript - 使用jquery每3秒显示一次div

标签 javascript jquery html css

我有这两个 div,想知道如何每 3 秒显示第二个 (box2) div。

<div id="box1" style="background-color:#0000FF">
     <h3>This is a heading in a div element</h3>

    <p>This is some text in a div element.</p>
</div>
<div id="box2" style="background-color:red">
     <h3>This is a heading in a div element</h3>

我怎样才能用 jquery 做到这一点?

我在这里创建了一个 fiddle 。 http://jsfiddle.net/jRmrp/5/

更新 1

Khanh TO 给出的答案有效,但我想知道当 div 计数超过 2 时该怎么办。它只允许两个。

最佳答案

你需要这个吗?

setInterval(function(){
     $("#box2").toggle();
    $("#box1").toggle();
},3000);

DEMO

根据新要求更新:

var currentIndex = 0;
$(".box:not(:eq("+ currentIndex +"))").hide();

var totalDiv = $(".box").length;

setInterval(function(){
     currentIndex = (currentIndex + 1) % totalDiv;

    $(".box").hide();
     $(".box").eq(currentIndex).show();

},3000);

DEMO

关于javascript - 使用jquery每3秒显示一次div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20157790/

相关文章:

jquery - 如何使用jquery更改元素的CSS

jquery - 使用 jQuery 对图像进行分类

javascript - 使用 FormData 上传 JQuery/AJAX 文件,文件未发布

javascript - Bootstrap 4 - 使下拉列表的父级成为可点击的链接

javascript - ExtJS 4.2.1 - 向任何弹出菜单添加顶部箭头

javascript - jQuery 插件打开的 Angular 6 中的模式仅在单击两次后关闭

javascript - 哪种脚本语言更适合嵌入多线程 C/C++ 应用程序

html - 使文本像复选框一样

javascript - 如何分别获取输入标签和选项标签并加载到div内部和select内部

javascript - 如何运行 "npm start"永远运行