Afficher et masquer les divs à un intervalle de temps spécifique à l'aide de jQuery

Je souhaite afficher les séparations à un intervalle spécifique (10 secondes) et afficher le div suivant, puis continuer et répéter la même chose.
Afficher et masquer les divs à un intervalle de temps spécifique à l'aide de jQuery

séquence:

** Le 10 deuxième div1 show, cacher d'autres divs,
Après 5 secondes d'intervalle Afficher div 2 et cacher autres divs,
Après 5 secondes d'intervalle Afficher div 3 et masquer d'autres divs,
et répétez la même chose toutes les 10 secondes.

Code suit:

<div id='div1' style="display:none;"> 
    <!-- content --> 
</div> 

<div id='div2' style="display:none;"> 
    <!-- content --> 
</div> 

<div id='div3' style="display:none;"> 
    <!-- content --> 
</div>

Source

2009-05-27 Webrsk

Working Example ici - ajouter /modifier à l'URL de jouer avec le code

Vous avez juste besoin d'utiliser la fonction JavaScript setInterval

$('html').addClass('js'); 

$(function() { 

    var timer = setInterval(showDiv, 5000); 

    var counter = 0; 

    function showDiv() { 
    if (counter ==0) { counter++; return; } 

    $('div','#container') 
     .stop() 
     .hide() 
     .filter(function() { return this.id.match('div' + counter); }) 
     .show('fast'); 
    counter == 3? counter = 0 : counter++; 

    } 

});

et le code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <title>Sandbox</title> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
     <style type="text/css" media="screen"> 
     body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; } 
     .display { width:300px; height:200px; border: 2px solid #000; } 
     .js .display { display:none; } 
     </style> 
    </head> 

    <body> 
     <h2>Example of using setInterval to trigger display of Div</h2> 
     <p>The first div will display after 10 seconds...</p> 
     <div id='container'> 
     <div id='div1' class='display' style="background-color: red;"> 
     div1 
     </div> 
     <div id='div2' class='display' style="background-color: green;"> 
     div2 
     </div> 
     <div id='div3' class='display' style="background-color: blue;"> 
     div3 
     </div> 
     <div> 
    </body> 

</html>

EDIT:

En réponse à vos commentaires sur le conteneur div, il suffit de modifier cette

$('div','#container')

à cette

$('#div1, #div2, #div3')

Source

2009-05-27 10:29:40

Russ Merci pour la réponse rapide à la poste. Dans votre exemple, il montre que nous devons avoir un conteneur div et dans ce que nous devons avoir d'autres divs .. Mais mes divs ne sont pas à l'intérieur d'un conteneur son séparé. comment modifier le code en conséquence? – Webrsk

avez-vous accès pour modifier le code HTML? Si c'est le cas, je suggère d'envelopper les divs dans un conteneur div pour le contexte et la facilité de sélection. Sans div conteneur, le code devrait être modifié pour ne sélectionner que les divs en question, c'est-à-dire les divs avec les identifiants 1, 2 et 3. Je mettrai à jour ma réponse maintenant –

Ya a du sens je peux l'avoir dans un container div pour mieux clarté. Russ dites-moi pouvons-nous montrer un autre div (appelé: div_sub1) au moment d'afficher div1 et par la suite.Le même code peut-il être resued? – Webrsk

Voir InnerFade.

<script type="text/javascript"> 
    $(document).ready(

    function() { 
     $('#portfolio').innerfade({ 
      speed: 'slow', 
      timeout: 10000, 
      type: 'sequence', 
      containerheight: '220px' 
     }); 
    }); 
</script> 
<ul id="portfolio"> 
    <li> 
     <a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html"> 
     <img src="images/ggbg.gif" alt="Good Guy bad Guy" /> 
     </a> 
    </li> 
    <li> 
     <a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html"> 
     <img src="images/whizzkids.gif" alt="Whizzkids" /> 
     </a> 
    </li> 
    <li> 
     <a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html"> 
     <img src="images/km.jpg" alt="Königin Mutter" /> 
     </a> 
    </li> 
    <li> 
     <a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html"> 
     <img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" /> 
     </a> 
    </li> 
    <li> 
     <a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html"> 
     <img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" /> 
     </a> 
    </li> 
</ul>

Source

2009-05-27 10:25:17

Nice et simple plugin! – TruMan1

boucle par divs toutes les 10 secondes.

$(function() { 

    var counter = 0, 
     divs = $('#div1, #div2, #div3'); 

    function showDiv() { 
     divs.hide() // hide all divs 
      .filter(function (index) { return index == counter % 3; }) // figure out correct div to show 
      .show('fast'); // and show it 

     counter++; 
    }; // function to loop through divs and show correct div 

    showDiv(); // show first div  

    setInterval(function() { 
     showDiv(); // show next div 
    }, 10 * 1000); // do this every 10 seconds  

});

Source

2009-05-27 10:38:06

est-il un moyen de changer la mise en page à, montrer div1 puis montrer div2 et toujours montrer div1 en même temps. Donc, quand div2 arrive, il montre div1 et div2? –

ici est un plugin jQuery je suis venu avec:

$.fn.cycle = function(timeout){ 
    var $all_elem = $(this) 

    show_cycle_elem = function(index){ 
     if(index == $all_elem.length) return; //you can make it start-over, if you want 
     $all_elem.hide().eq(index).fadeIn() 
     setTimeout(function(){show_cycle_elem(++index)}, timeout); 
    } 
    show_cycle_elem(0); 
}

Vous devez avoir un nom de classe commune pour tous les divs vous wan à vélo, l'utiliser comme ceci:

$("div.cycleme").cycle(5000)

Source

2009-05-27 10:39:12 duckyflip

Essayez cette

 $('document').ready(function(){ 
     window.setTimeout('test()',time in milliseconds); 
     }); 

     function test(){ 

     $('#divid').hide(); 

     }

Source

2013-10-24 07:42:09 jool

Il Une autre prise sur ce problème, en utilisant la récursivité et sans utiliser des variables mutables. En outre, je n'utilise pas setInterval donc il n'y a pas de nettoyage à faire.

Avoir ce HTML

<section id="testimonials"> 
    <h2>My testimonial spinner</h2> 
    <div class="testimonial"> 
     <p>First content</p> 
    </div> 
    <div class="testimonial"> 
     <p>Second content</p> 
    </div> 
    <div class="testimonial"> 
     <p>Third content</p> 
    </div> 
</section>

En utilisant ES2016

Ici, vous appelez la fonction récursive et mettre à jour les arguments.

const testimonials = $('#testimonials') 
     .children() 
     .filter('div.testimonial'); 

    const showTestimonial = index => { 

    testimonials.hide(); 
    $(testimonials[index]).fadeIn(); 

    return index === testimonials.length 
     ? showTestimonial(0) 
     : setTimeout(() => { showTestimonial(index + 1); }, 10000); 
    } 

showTestimonial(0); // id of the first element you want to show.

Source

2016-03-03 12:41:54 stormpat

Afficher et masquer les divs à un intervalle de temps spécifique à l'aide de jQuery

Répondre

Questions connexes