Skip to main content
etiquetas editadas; título editado
Enlace
Mariano
  • 24.5k
  • 20
  • 76
  • 105

Cambiar dinámicamente imagenes cada x segundos con settimeout - jQuery

se añadieron 175 caracteres en el cuerpo
Origen Enlace
omaza1990
  • 2.8k
  • 36
  • 103
  • 163

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.

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);
            }
        }
    });

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.

Origen Enlace
omaza1990
  • 2.8k
  • 36
  • 103
  • 163

Cambiar dinámicamente imagenes cada x segundos con settimeout - jQuery

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);
            }
        }
    });