JQuery - Cycle classe avec minuterie

Question

j'ai un esprit de liste ci-dessous la structure

<div id="slider"> 
    <ul> 
    <li class='active'> a </li> 
    <li> b </li> 
    <li> c </li>  
    <li> d </li> 
    <li> e </li> 
    </ul> 
</div> 

je dois changer la classe « active » de Li de façon à vélo Voici le script que je travaille avec . question est non plus ajoute la classe actif à tous Li ou supprime la classe actif de

 toggleSlide = function(){ 
      $("#slider ul li").each(function(index) { 
      if($(this).hasClass('active')){ 

       $("#slider ul li").removeClass('active'); 
       $(this).next().addClass('active')); 
       //lis = $("#slider ul li") 
       //$(lis[(index+1)%lis.length]).addClass('active'); 
      } 
      }); 
     } 
    setInterval(toggleSlide, 5000);​ 

Answer 1

Vous pouvez simplifier considérablement ce avec .add() et .last() puisque les éléments de .add() sont activés dans l'ordre du document, il ressemblerait à ceci:

var toggleSlide = function(){ 
    $("#slider li.active").removeClass() 
    .next().add("#slider li:first").last().addClass("active"); 
} 
setInterval(toggleSlide, 5000); 

You can test it here (1000ms duration for the demo)

Comment cela fonctionne est qu'il faut la prochaine <li>si il y en a un, puis ajoute le premier, en utilisant .last() (puisqu'ils sont dans l'ordre du document), nous obtiendrons le .next() un si il est là, sinon l'ensemble ne contient qu'un seul élément, le :first<li>, et nous sommes de retour au début.

Answer 2

de tous li Cela devrait fonctionner un peu mieux:

toggleSlide = function() {  
    var $active = $('#slider ul li.active'); 
    if($active.length == 0) { 
     $active = $('#slider ul li:first'); 
    } 
    $active.removeClass('active'); 
    if($active.next('li').length > 0) { 
     $active.next('li').addClass('active'); 
    } else { 
     $('#slider ul li:first').addClass('active'); 
    } 
} 
setInterval(toggleSlide, 5000);​ 

Vous n'avez pas besoin .each() boucle et c'est ce qui causait vos problèmes. Vous avez seulement besoin de travailler sur l'élément actif actuel.

Un exemple concret:

http://jsfiddle.net/MS5DV/

Answer 3

Je vais pour quelque chose de beaucoup plus simple

toggleSlide = function() { 
    var active = $("#slider ul li.active"); 
    var next = active.next(); 
    if (next.length === 0) { 
     next = $('#slider ul li:first'); 
    } 

    active.removeClass('active'); 
    next.addClass('active'); 
} 
setInterval(toggleSlide, 1000); 

http://jsfiddle.net/HyRYC/1/

Fondamentalement, trouver l'élément actif et enregistrez-le un var local Ensuite, trouvez l'article après et enregistrez-le aussi. Maintenant, si le dernier est actif, alors next() retournera un objet jQuery sans correspondance, ce qui signifie qu'il a une longueur de zéro. Dans ce cas, trouvez le premier article à notre next.

Non, nous supprimons simplement la classe active de l'élément actif actuel, et l'ajoutons à la suivante.