Bagaimanakah Saya Boleh Menggunakan jQuery untuk Menunjukkan Div Secara Berurutan pada Selang Masa Tetapkan?

Paparan Automatik Div ​​pada Selang Masa Tertentu menggunakan jQuery

jQuery menawarkan cara yang mudah untuk memanipulasi elemen HTML secara dinamik. Dalam kes khusus ini, kami menyasarkan untuk menunjukkan jujukan div ("div1", "div2", "div3") pada selang 10 saat yang telah ditetapkan setiap satu. Selepas kelewatan awal, setiap div hendaklah dipaparkan secara bergilir manakala yang lain kekal tersembunyi.

Untuk mencapai ini:

1. Mulakan Pemasa: Kami menggunakan fungsi setInterval untuk menyediakan pemasa berulang. Dalam contoh kami, pemasa ditetapkan untuk mencetuskan setiap 5 saat (5000 milisaat).
2. Paparan Kitaran: Dalam fungsi pemasa (showDiv), kami memperkenalkan logik untuk menunjukkan secara berurutan div yang dikehendaki . Setiap div diberi pengecam berangka ("div1", "div2", "div3").
3. Pembolehubah Kaunter: Pembolehubah pembilang (pembilang) menjejaki div semasa yang akan dipaparkan. Ia bermula pada 0 dan meningkat selepas setiap paparan.
4. Logik Paparan: Menggunakan kaedah hide and show jQuery, kami menyembunyikan semua div kecuali yang ditentukan oleh kaunter. Ini memastikan bahawa hanya satu div kelihatan pada satu masa.
5. Gelung Berterusan: Selepas memaparkan div ketiga ("div3"), pembilang ditetapkan semula kepada 0, membenarkan jujukan berulang. selama-lamanya.

Sampel Kod:

$('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

  }

});

Kesimpulan:

Dengan memanfaatkan keupayaan manipulasi setInterval dan DOM jQuery, anda boleh mengautomasikan paparan elemen pada tapak web dengan mudah pada yang ditentukan selang masa, membenarkan kandungan yang dinamik dan menarik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan jQuery untuk Menunjukkan Div Secara Berurutan pada Selang Masa Tetapkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!