jQuery を使用して、設定した時間間隔で Div を連続的に表示するにはどうすればよいですか?

jQuery を使用した特定の時間間隔での Div の自動表示

jQuery は、HTML 要素を動的に操作する便利な方法を提供します。この特定のケースでは、一連の div (「div1」、「div2」、「div3」) をそれぞれ 10 秒の所定の間隔で表示することを目的としています。最初の遅延の後、各 div が順番に表示され、他の div は非表示のままになります。

これを実現するには:

1. タイマーを初期化します:定期的なタイマーを設定するための setInterval 関数。この例では、タイマーは 5 秒 (5000 ミリ秒) ごとにトリガーされるように設定されています。
2. サイクル表示: タイマー関数 (showDiv) 内に、目的の div を順番に表示するロジックを導入します。 。各 div には数値識別子 (「div1」、「div2」、「div3」) が与えられます。
3. カウンター変数: カウンター変数 (counter) は、現在の div を追跡します。表示されます。 0 から始まり、表示するたびに増加します。
4. 表示ロジック: jQuery の Hide メソッドと show メソッドを使用して、カウンターで指定された div を除くすべての div を非表示にします。これにより、一度に 1 つの div だけが表示されるようになります。
5. 連続ループ: 3 番目の 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 操作機能を利用することで、指定した Web サイト上の要素の表示を簡単に自動化できます。時間間隔を設定することで、ダイナミックで魅力的なコンテンツを実現します。

以上がjQuery を使用して、設定した時間間隔で Div を連続的に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。