如何使用 jQuery 按设定的时间间隔顺序显示 Div？

使用 jQuery 以特定时间间隔自动显示 Div

jQuery 提供了一种动态操作 HTML 元素的便捷方法。在此特定情况下，我们的目标是按预定的间隔（每个 10 秒）显示一系列 div（“div1”、“div2”、“div3”）。初始延迟后，每个 div 应依次显示，而其他 div 保持隐藏。

要实现此目的：

1. 初始化计时器： 我们使用setInterval 函数设置循环定时器。在我们的示例中，计时器设置为每 5 秒（5000 毫秒）触发一次。
2. 循环显示： 在计时器函数 (showDiv) 中，我们引入了逻辑来顺序显示所需的 div 。每个 div 都有一个数字标识符（“div1”、“div2”、“div3”）。
3. 计数器变量： 计数器变量 (counter) 跟踪当前的 div显示。它从 0 开始，每次显示后递增。
4. 显示逻辑： 使用 jQuery 的 hide 和 show 方法，我们隐藏除计数器指定的 div 之外的所有 div。这可确保一次只有一个 div 可见。
5. 连续循环： 显示第三个 div（“div3”）后，计数器重置为 0，允许重复序列无限期。

示例代码：

$('html').addClass('js'); // Add a class indicating JavaScript support

$(function() {

  var timer = setInterval(showDiv, 5000); // Set up a timer to trigger every 5 seconds

  var counter = 0; // Initialize the counter

  function showDiv() {
    if (counter == 0) { // Skip the first iteration to introduce a 5-second delay
      counter++;
      return;
    }

    $('div', '#container') // Select all divs within the container
      .stop() // Stop any ongoing animations
      .hide() // Hide all divs
      .filter(function() { // Filter the divs by ID
        return this.id.match('div' + counter); // Check if the ID matches the current counter
      })
      .show('fast'); // Show the matching div
    counter == 3 ? counter = 0 : counter++; // Increment the counter, or reset it to 0 if it reaches 3

  }

});

结论：

通过利用 jQuery 的 setInterval 和 DOM 操作功能，您可以轻松地在指定的时间自动在网站上显示元素时间间隔，允许动态且引人入胜的内容。

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