jQuery Reemplazar imágenes a intervalos de tiempo

Estoy tratando de agregar luces de navidad a mi logo. Iba a hacer esto en flash, pero estoy tratando de alejarme del flash, así que decidí probarlo con jQuery.

Una búsqueda rápida en Google devolvió este tutorial . Lo que hizo un trabajo bastante bueno para ponerme en el camino correcto. El problema es que no quiero que las imágenes aparezcan y desaparezcan, así que las reemplacé.

$active.fadeOut(function() $next.fadeIn().addClass('active'); 

con $ active.show (function () $ next.show (). addClass (‘active’);

El problema con esto es que solo gira las imágenes una vez y luego se detiene. Intenté usar hide lugar, pero tiene un efecto de alejamiento extraño.

En resumen, tengo 4 imágenes y estoy tratando de hacer un ciclo a través de este código:

  function swapImages(){ var $active = $('#myGallery .active'); var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first'); $active.show(function(){ $active.removeClass('active'); $next.show().addClass('active'); }); } $(document).ready(function(){ setInterval('swapImages()', 1000); }) 

HTML:

  

Ver código parcial parcialmente funcional aquí o no funciona jsfiddle

Prueba esto;

 function swapImages() { var $current = $('#myGallery img:visible'); var $next = $current.next(); if($next.length === 0) { $next = $('#myGallery img:first'); } $current.hide(); $next.show(); } $(document).ready(function() { // Run our swapImages() function every 0.5 secs setInterval(swapImages, 500); }); 

Ejemplo de trabajo

Bonus ( cambio aleatorio )

 function swapImages() { var random = Math.floor(Math.random()*3), $current = $('#myGallery img:visible'); $current.hide(); if($current.index() == random) { random = ++random % 4; } $('#myGallery img').eq(random).show(); } $(document).ready(function() { // Run our swapImages() function every 0.5 secs setInterval(swapImages, 500); }); 

Ah, ya respondió.

Prueba este

Has usado la función show () que agrega display: block style al elemento. Entonces, después de una ejecución, todas las imágenes se mostraban a la vez y la última estaba encima de las demás para que se mostrara una.