Faire defiler des li en jquery

Fermé

diagui33 - 20 juin 2011 à 17:19
diagui33 - 25 juin 2011 à 08:44

Bonjour,
je souhaite pouvoir faire defiler des li dans une zone en jquery ou autre d'ailleur.
exemple:

<ul id="defil">
      <li style="display:block"> mesg 1 </li>
      <li style="display:none"> mesg 2 </li>
      <li style="display:none"> mesg 3 </li>
      <li style="display:none"> mesg 4 </li>
      <li style="display:none"> mesg 5 </li>
</ul>

sur ce bout de code, le texte afficher est "mesg 1", je voudrai maitenant au bout de quelque seconde afficher "mesg 2" et masquer tout les autres, ensuite "mesg 3" est affiché et les autres masqué, ainsi de suite jusqu'au dernier des li c'est a dire qu'apres quelque seconde d'affichage de 'mesg 5', on repart sur "mesg 1" et on boucle comme ça indefinement.
Je ne suis pas tres à l'aise en javascript mais je me suis documenté et vu que ça pouvais se faire avec la methode js setInterval. mais je ne sais comment faire pour varier sur les li.
Merci pour vos contributions

A voir également:

Faire defiler des li en jquery
La la li la la la 90's song - Forum Musique / Radio / Clip
Chanson des années 1990s avec lala lala ✓ - Forum Musique / Radio / Clip
Comment lier des pdf - Guide
Comment faire défiler les photos sur macbook air - Forum MacOS
Comment faire defiler des photos sur mac - Forum MacOS

1 réponse

Réponse 1 / 1

wAxxx Messages postés 421 Date d'inscription mardi 24 juin 2008 Statut Membre Dernière intervention 29 septembre 2015 46
20 juin 2011 à 20:41

Salut,

Première solution, utilise l'attribut CSS du jquery ainsi que la fonction sleep,

je te donne un exmple

supposant je veux changer l'attribut display du premiere balise li en none au lieu de block
je donne un id d'abord à mon li par exemple <li id="li1" style="display:block"> mesg 1 </li>

puis à l'aide de jquery je fais :
jQuery('#li1').css({'display' : 'none'});

Bah tu peux meme ,joeur avec ce petit code avec les fonctions .delay() .fadeIn() et .slideUp par exemple

diagui33
20 juin 2011 à 22:57

desolé j'ai pas tres bien compris. toutefois j'ai essayé ce bout de code mais il fait disparaitre le premier des li au bout de 3 seconde mais apres rien ne s'affiche;

    $("#lastnews ul li").each(function(){
        setTimeout(function(){$("#lastnews ul li").fadeOut('normal');}, 3000);
    });

si tu m'en dire plus sur la façon de faire. ça sera super. merci en tout les cas

Profil bloqué
21 juin 2011 à 00:40

Tu pourrais éventuellement utiliser .hide() aussi ;)

diagui33
21 juin 2011 à 07:44

la n'est pas le probleme d'afficher ou de masquer un element: je peux utiliser css(display:none/display: block), fadeOut/fadeIn, hide/show. mon probleme est que je ne sais pas comment iterer sur les elements pour masquer tous les autres sauf le courant, ensuite masquer tout les autres sauf le suivant, ainsi de suite. je ne sais pas si j'ai été un peu plus clair.
merci quand meme de l'aide

diagui33
21 juin 2011 à 08:25

j'ai reussi a faire ceci: ça fonctionne mais l'effet n'est pas tres bien a mon gout.

   var i = 1;
    var n = $('#lastnews ul li').length;
    $(function(){
        setInterval(function(){
            i++;
            if(i > n) i = 1;
            $("#lastnews ul li").hide('fast');
            $("#li_news_"+i).show('fast');
         },10000);
     });

comment puis-je faire un effet fondu? merci

Profil bloqué
Modifié par Th3tagg3r le 21/06/2011 à 15:24

.hide(500) peut-etre, du moins, je dis ca, mais je ne suis vraiment pas tres calé sur la question... :/

Discussions similaires

Différence entre batterie Ii-ion et Li-po sur un smartphone

Chanson la li la li la la la?

faire défiler les photos automatiquement

Impossible de faire défiler mes photos avec les fleches

titre techno house annees 90