如何使用 jQuery 按设定的时间间隔显示和隐藏 Div？

使用 jQuery 以特定时间间隔显示和隐藏 Div

通过利用 jQuery setInterval 函数，可以按预定义的时间间隔显示 div并控制它们在序列中的可见性。以下是所涉及步骤的详细概述：

代码实现：

首先定义 HTML 结构，创建三个 div（div1、div2、div3）并隐藏它们首先。

<div>

在 JavaScript 代码中，创建一个名为 showDiv() 的函数来控制 div 的显示。在此函数中，使用 counter 变量遍历 div 并一次显示一个。

function showDiv() {...}

初始化一个计数器来跟踪当前的 div 并使用 jQuery stop() 函数取消任何正在进行的

var counter = 0;
$('div', '#container').stop().hide();

要显示当前的div，请使用jQuery的filter()函数根据计数器选择适当的div，然后使用show('fast').

.filter(function() {...}).show('fast');

增加或重置计数器以确保序列在到达最后一个 div 后重复。

counter == 3 ? counter = 0 : counter++;

最后，使用 setInterval 启动计时器并设置所需的时间间隔（本例中为 5000 毫秒）。

var timer = setInterval(showDiv, 5000);

该解决方案提供了一种灵活且可定制的方式以特定的时间间隔显示和隐藏div，适合需要顺序或定时显示的场景。

以上是如何使用 jQuery 按设定的时间间隔显示和隐藏 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！