如何使用 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中文網其他相關文章！