2

Encontré un código que hace un random de imágenes en JavaScript a determinados segundos, todo está muy bien.. Sólo que ¿se podría poner algún efecto entre imágenes? intento que no se haga el cambio tan brusco y seco

Aquí el código:

var imagenes=new Array(
  'http://lorempixel.com/500/200/cats',
  'http://lorempixel.com/500/200/people',
  'http://lorempixel.com/500/200/nature'
);

/**
 * Funcion para cambiar la imagen
 */
function rotarImagenes()
{
  // obtenemos un numero aleatorio entre 0 y la cantidad de imagenes que hay
  var index=Math.floor((Math.random()*imagenes.length));

  // cambiamos la imagen
  document.getElementById("imagen").src=imagenes[index];
}

/**
 * Función que se ejecuta una vez cargada la página
 */
onload=function()
{
  // Cargamos una imagen aleatoria
  rotarImagenes();

  // Indicamos que cada 5 segundos cambie la imagen
  setInterval(rotarImagenes,5000);
}
<img id="imagen" />

1 respuesta 1

2

Podrias usar jquery para realizar el efecto

var imagenes=new Array(
  'http://lorempixel.com/500/200/cats',
  'http://lorempixel.com/500/200/people',
  'http://lorempixel.com/500/200/nature'
);


function rotarImagenes()
{

  var index=Math.floor((Math.random()*imagenes.length));

  $("#imagen").fadeOut(1000, function() {
            $(this).attr('src',imagenes[index]);
        }).fadeIn(1000);
}

$(function(){
  
  rotarImagenes();

  setInterval(rotarImagenes,5000);
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<img id="imagen" />

Estarias usando el fadeOut() y fadeIn() para aplicar el efecto.

Ademas ya que tendrias jquery usa el

$(function() {
  ...
});

para detectar cuando el DOM del html esta listo

jQuery Change Image src with Fade Effect

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.