首頁 > web前端 > css教學 > 如何使用 jQuery 按設定的時間間隔顯示和隱藏 Div?

如何使用 jQuery 按設定的時間間隔顯示和隱藏 Div?

Mary-Kate Olsen
發布: 2024-12-08 12:46:11
原創
196 人瀏覽過

How Can I Use jQuery to Show and Hide Divs at Set Intervals?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板