11548 sujets

JavaScript, DOM et API Web HTML5

Afficher puis masquer une sucession de bloc

Bonjour,

Je souhaite mettre en place un bloc "actualité" sur une page avec à l'intérieur l'actualité n°1 qui s'affiche pendant x secondes puis la n°2... ainsi de suite pour revenir à la n°1 à la façon d'une diapostive.

Exemple:
http://www.afnor.org/ : le cadre normalisation avec les flèches gauche/droite (ici non automatique) pour faire défiler le contenu (ici une image)
http://www.cofrac.fr/ : le bloc actualité

J'ai cherché des exemples de codes ou tuto, mais je n'ai trouvé et réussi qu'à faire défiler du texte en continu à l'intérieur d'un bloc (comme ici http://forum.phpfrance.com/vos-contributions/objet-defilant-javascript-dom-xhtml-css-t251015.html#p312172) mais moi c'est le bloc que je souhaite faire défiler vraiment comme une sucession de diapositive?

Merci d'avance si vous avez des exemples ou êtes déjà tombés sur des tutos.
Bonjour,

Ce genre de fonctionnalité se gère en général en JavaScript. Le terme consacré est "carousel".
Coucou,
Sinon j'ai fait un truc plus "simple", reste plus qu'à le paramétrer correctement : 


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language='Javascript'>
$(document).ready(function()
{    
    function Bloc_suivant()
    {
        var nb_blocs = 3;  // Paramètre à modifier, voir à gérer de manière automatique
        var en_cours = '';
        var suivant = '';
        
        $('div').each(function()  // Pour tous les div
        {
            if ($(this).hasClass('show'))  // On test si le div en cours est celui visible
            {
                    en_cours = $(this).attr('id');   // On stock le numéro du bloc visible

                    if (en_cours == nb_blocs)  // Si on est arrivé au dernier des blocs
                    {
                        suivant = '1';  // Le prochain bloc affiché sera le premier
                    }
                    else // Sinon
                    {
                        suivant = $(this).next().attr('id');  // On stock le numéro du prochain bloc
                    }
                
                for (i=1; i<nb_blocs+1; i++)  // Pour tous les blocs
                {
                    if ($('#'+i+'').attr('id') != suivant)  // Si le bloc en cours n'est pas celui à afficher
                    {
                        $('#'+i+'').hide();  // On le masque
                    }
                    else  // Si c'est celui à afficher
                    {
                        $('#'+i+'').show();  // On l'affiche  
                    }
                }                
            }
        });

        $('#'+en_cours+'').removeClass('show');  // On gère la class du bloc qu'on vient de masquer
        $('#'+suivant+'').addClass('show');  // Et celle de celui qu'on vient d'afficher

    }
        
    setInterval(Bloc_suivant,1050);  // On éxecute le changement de bloc tous les x secondes, paramètre modifiable
    
});
</script>
</head>
<body>
 
<!-- Création de 3 blocs de test -->
<!-- Attention à bien gérer les id des blocs -->
    <div style='background-color : lightgreen; width:150px; height:150px' class='show' id='1'></div>
    <div style='background-color : lightpink; width:150px; height:150px; display:none' id='2'></div>
    <div style='background-color : lightblue; width:150px; height:150px; display:none' id='3'></div>
	
</body>
</html>

Modifié par Seyu (10 Feb 2012 - 11:47)
Bonjour,

Je viens d'avoir vos réponses... merci l'anti-spam.

Avec le bon terme technique c'est en effet plus facile de trouver de la doc.

Sinon le code marche très bien je vais pouvoir l'adapter à ma sauce!
C'est quoi le code jquery importé?

Merci
Coucou,

C'est la librairire Javascript qui te permet de faire des trucs sympatoches sur les évènements ...
Comme par exemple 
$(this).slideDown();

Qui va dérouler comme un "slide" (=glisser) un cadre jusqu'alors masqué.

Si tu as besoin, j'ai rajouté deux petits trucs pour arrêter et relancer le défilement (peut être sympa par exemple d'arrêter le défilement lorsqu'on passe la souris sur le cadre) :

Deux boutons en plus dans le html en bas de la page :

    <input type='button' class='stop' value='Stop !'>
    <input type='button' class='again' value='Go again !'>


Le bout de Javascript : 

var refresh = setInterval(Bloc_suivant,1050); // Tu nommes ton répéteur

    $('.stop').click(function() // Sur le click du bouton "stop". (Tu peux faire aussi $('div').hover pour l'evenement de la souris qui passe dessus)
    {
        clearInterval(refresh); // Tu arrêtes le défilement
    } );
    
    $('.again').click(function() // Sur le click du bouton "again". (Et ici faire $('div').mouseleave pour indiquer lorsque ta souris quitte l'élément)
    {
        refresh = setInterval(Bloc_suivant,1050);  // Tu réinitialise le répéteur
    });
Bonsoir,

J'ai adapter les éléments pour arrêter ou continuer sur le passage de la souris, ça marche bien!
Merci Smiley cligne
Sujet clos
Aller à