Comment puis-je utiliser jQuery pour afficher les divisions de manière séquentielle à des intervalles de temps définis ?

Affichage automatisé des Divs à des intervalles de temps spécifiques à l'aide de jQuery

jQuery offre un moyen pratique de manipuler des éléments HTML de manière dynamique. Dans ce cas précis, nous visons à afficher une séquence de divs ("div1", "div2", "div3") à des intervalles prédéterminés de 10 secondes chacun. Après le délai initial, chaque div doit être affiché à tour de rôle tandis que les autres restent cachés.

Pour y parvenir :

1. Initialisez le minuteur :Nous utilisons le Fonction setInterval pour configurer une minuterie récurrente. Dans notre exemple, la minuterie est réglée pour se déclencher toutes les 5 secondes (5 000 millisecondes).
2. Affichage du cycle : Dans la fonction de minuterie (showDiv), nous introduisons une logique pour afficher séquentiellement les divs souhaités. . Chaque div reçoit un identifiant numérique ("div1", "div2", "div3").
3. Variable de compteur : Une variable de compteur (compteur) garde la trace du div actuel à être affiché. Il commence à 0 et s'incrémente après chaque affichage.
4. Logique d'affichage : En utilisant les méthodes hide et show de jQuery, nous masquons tous les divs sauf celui spécifié par le compteur. Cela garantit qu'un seul div est visible à la fois.
5. Boucle continue : Après avoir affiché le troisième div ("div3"), le compteur est réinitialisé à 0, permettant à la séquence de se répéter indéfiniment.

Échantillon Code :

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

  }

});

Conclusion :

En exploitant les capacités de manipulation setInterval et DOM de jQuery, vous pouvez facilement automatiser l'affichage des éléments sur un site Web à des moments spécifiés. intervalles de temps, permettant un contenu dynamique et engageant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!