如何使用 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，允許重複序列無限期。

範例程式碼：

結論：

利用 jQuery 的 setInterQuery 和 DOM操作功能，您可以輕鬆地在指定的時間自動在網站上顯示元素時間間隔，允許動態且引人入勝的內容。

以上是如何使用 jQuery 按設定的時間間隔順序顯示 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！