img remplacement avec JQuery

Question

Je suis nouveau à Jquery et même Javascript. Trouvé et mis en œuvre ce script qui, en temps opportun, remplace les images. Le script fonctionne bien lorsque j'enveloppe les images dans un tag. Je veux que les images soient des liens. Dès que j'enveloppe les balises dans un tag, le script se rafraîchit toutes les secondes, mais ne charge pas l'image suivante.

Que dois-je changer dans ce script pour avoir la charge suivante d'image correctement

<script type='text/javascript'> 
    function swapImages(){ 
     var $active = $('#rooster .active'); 
     var $next = ($('#rooster .active').next().length > 0) ? $('#rooster .active').next() : $('#rooster img:first'); 
     $active.fadeOut(function(){ 
     $active.removeClass('active'); 
     $next.fadeIn().addClass('active'); 
     }); 
    } 

    $(document).ready(function(){ 
     // Run our swapImages() function every 5secs 
     setInterval('swapImages()', 5000); 
    }); </script> 

Answer 1

Le problème est ici:

$('#rooster img:first') 

Il essaie de trouver la première <img> et fade, mais comme il est enveloppé dans une étiquette, il ne va pas faire beaucoup de bien, vous devez changer le type d'étiquette là, comme ça

$('#rooster a:first') 

Globalement, il y a d'autres changements si, par exemple, vous ne devriez jamais passer une chaîne à setInterval() si vous pouvez l'éviter, au lieu simplement passer le nom de la fonction, comme ceci:

setInterval(swapImages, 5000); 

Une fois que vous faites cela, vous n « t doivent quitter la fonction comme un problème global, vous pouvez ranger vers le haut dans votre document.ready, vous pourriez ensemble faire quelque chose comme ceci:

$(function(){ 
    function swapImages(){ 
    var $active = $('#rooster .active'); 
    var $next = $active.next().length > 0 ? $active.next() : $('#rooster a:first'); 
    $active.fadeOut(function(){ 
     $active.removeClass('active'); 
     $next.fadeIn().addClass('active'); 
    }); 
    } 
    setInterval(swapImages, 5000); 
});