1

Deseo cambiar automaticamente cada x segundos la imagen X por la imagen Y, así sucesivamente usando el método setTimeOut o interval.

Código:

   $("#cambiar_imagenes_x_segundos").click(function() {
        var img = new Image();

        var src1 = 'isco.png';
        var src2 = "torres.png";
        //Si el contenido (.html()) del ID imagen esta vacio, NO hay foto.
        if ($('#imagen').html().trim() == "") { //.trim() para quitar los espacios.
            img.src = src1; //Cargamos la imagen de Isco (imagen1) al atributo "img.src".
            $('#imagen').append(img); //Añadimos la imagen "img" al id "#imagen".
            $(this).val("Cambiando imagen automaticamente..."); //Cambiamos de nombre al boton llamandolo "Cambiar foto".
            $(this).attr("disabled", true);
        } else {
            //Si hay foto...
            if ($('#imagen>img').attr("src") == src1) {
                $('#imagen>img').attr("src", src2);
            } else {
                $('#imagen>img').attr("src", src1);
            }
        }
    });

¿Cómo se podría añadir a este código un setInterval o setTimeOut para que cada X segundos cambie de imagen? Para no tener que pulsar el botón para modificar la imagen.

2
  • no veo error, problema, o pregunta alguna :P
    – FederHico
    Commented el 11 may. 2017 a las 20:50
  • ¿Cómo se podría añadir el settimeout para que varíe cada x segundos?
    – omaza1990
    Commented el 11 may. 2017 a las 20:51

1 respuesta 1

3

Deberías encapsular tu comportamiento en una funcion y luego con el click en #cambiar_imagenes_x_segundos , iniciar el timeout:

$("#cambiar_imagenes_x_segundos").click(function() 
{
     setTimeout(myfunction, 3000); //3 seg
});

funciton myfunction ()
{
   var img = new Image();

        var src1 = 'isco.png';
        var src2 = "torres.png";
        //Si el contenido (.html()) del ID imagen esta vacio, NO hay foto.
        if ($('#imagen').html().trim() == "") { //.trim() para quitar los espacios.
            img.src = src1; //Cargamos la imagen de Isco (imagen1) al atributo "img.src".
            $('#imagen').append(img); //Añadimos la imagen "img" al id "#imagen".
            $(this).val("Cambiando imagen automaticamente..."); //Cambiamos de nombre al boton llamandolo "Cambiar foto".
            $(this).attr("disabled", true);
        } else {
            //Si hay foto...
            if ($('#imagen>img').attr("src") == src1) {
                $('#imagen>img').attr("src", src2);
            } else {
                $('#imagen>img').attr("src", src1);
            }
        }
}
1
  • te da error ? o que ?
    – FederHico
    Commented el 12 may. 2017 a las 12:00

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.