Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Como detener la rotación de imágenes al pulsar sobre una de ellas

JavaScript - Como detener la rotación de imágenes al pulsar sobre una de ellas

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 11
Ha aumentado su posición en 12 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como detener la rotación de imágenes al pulsar sobre una de ellas

Publicado por Jhon (4 intervenciones) el 24/02/2020 03:40:42
Hola alguien me podría ayudar por favor agregarle una función al siguiente código para que se detenga al hacer clic sobre la imagen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<head>
<script>
    /**
     * Array con las imagenes y enlaces que se iran mostrando en la web
     */
    var imagenes=new Array(
        ['img/1.jpg','http://www.lawebdelprogramador.com/cursos/'],
        ['img/2.jpg','http://www.lawebdelprogramador.com/foros/'],
        ['img/3.jpg','http://www.lawebdelprogramador.com/pdf/'],
        ['img/4.jpg','http://www.lawebdelprogramador.com/utilidades/']
    );
 
    /**
     * Funcion para cambiar la imagen y link
     */
    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 y la url
        document.getElementById("imagen").src=imagenes[index][0];
        document.getElementById("link").href=imagenes[index][1];
    }
 
    /**
     * 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);
    }
</script>
</head>
 
<body>
 
<a href="" id="link"><img src="" id="imagen"></a>
 
</body>
</html>


Les Agradesco que me Ayuden
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como detener la rotación de imágenes al pulsar sobre una de ellas

Publicado por joel (895 intervenciones) el 24/02/2020 07:56:44
Hola Jhon, este código una vez pulsas sobre la imagen, se va a otra pagina, por lo que no tiene sentido detener la rotación...

Aquí te he modificado un poco el código, quitando el enlace, y permitiendo detener y volver a iniciar el proceso de rotación.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<head>
<script>
    var interval=0;
    /**
     * Array con las imagenes y enlaces que se iran mostrando en la web
     */
    var imagenes=new Array(
        ['img/1.jpg','http://www.lawebdelprogramador.com/cursos/'],
        ['img/2.jpg','http://www.lawebdelprogramador.com/foros/'],
        ['img/3.jpg','http://www.lawebdelprogramador.com/pdf/'],
        ['img/4.jpg','http://www.lawebdelprogramador.com/utilidades/']
    );
 
    /**
     * Funcion para cambiar la imagen y link
     */
    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 y la url
        document.getElementById("imagen").src=imagenes[index][0];
    }
 
    /**
     * Función que se ejecuta una vez cargada la página
     */
    onload=function()
    {
        // Cargamos una imagen aleatoria
        rotarImagenes();
 
        empezarRotacion();
        document.getElementById("imagen").addEventListener("click", () => {
            if (interval==0) {
                empezarRotacion();
            } else {
                clearInterval(interval);
                interval=0;
            }
        });
    }
 
    function empezarRotacion() {
        // Indicamos que cada 5 segundos cambie la imagen
        interval=setInterval(rotarImagenes,1000);
    }
</script>
</head>
 
<body>
 
<img src="" id="imagen">
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 11
Ha aumentado su posición en 12 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como detener la rotación de imágenes al pulsar sobre una de ellas

Publicado por Jhon (4 intervenciones) el 24/02/2020 08:31:38
Lo que intento es que se abra el enlace de la imagen en otra pestaña pero si el usuario regresa la función este detenida en la imagino y link que dió clic
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como detener la rotación de imágenes al pulsar sobre una de ellas

Publicado por joel (895 intervenciones) el 24/02/2020 11:56:23
Entiendo... entonces seria algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<head>
<script>
    var interval=0;
    /**
     * Array con las imagenes y enlaces que se iran mostrando en la web
     */
    var imagenes=new Array(
        ['img/1.jpg','http://www.lawebdelprogramador.com/cursos/'],
        ['img/2.jpg','http://www.lawebdelprogramador.com/foros/'],
        ['img/3.jpg','http://www.lawebdelprogramador.com/pdf/'],
        ['img/4.jpg','http://www.lawebdelprogramador.com/utilidades/']
    );
 
    /**
     * Funcion para cambiar la imagen y link
     */
    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 y la url
        document.getElementById("imagen").src=imagenes[index][0];
        document.getElementById("link").href=imagenes[index][1];
    }
 
    /**
     * Función que se ejecuta una vez cargada la página
     */
    onload=function()
    {
        // Cargamos una imagen aleatoria
        rotarImagenes();
 
        empezarRotacion();
        document.getElementById("imagen").addEventListener("click", () => {
            if (interval==0) {
                empezarRotacion();
            } else {
                clearInterval(interval);
                interval=0;
            }
        });
    }
 
    function empezarRotacion() {
        // Indicamos que cada 5 segundos cambie la imagen
        interval=setInterval(rotarImagenes,1000);
    }
</script>
</head>
 
<body>
 
<a href="" id="link" target="_blank"><img src="" id="imagen">
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 11
Ha aumentado su posición en 12 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como detener la rotación de imágenes al pulsar sobre una de ellas

Publicado por Jhon (4 intervenciones) el 24/02/2020 14:35:08
Hola Joel gracias...

El cidigo cumple con la funciones pero sabes al segundo click vuelve y se activa el cambio de imagen como puedo bloquearlo para que solo quede con en el ultimo clic y ya no cambie mas al darle mas clic
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como detener la rotación de imágenes al pulsar sobre una de ellas

Publicado por joel (895 intervenciones) el 24/02/2020 18:01:08
Elimina las lineas que lo activan nuevamente...
Elimina las lineas 38, 39, 40 y 43
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 11
Ha aumentado su posición en 12 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Muchas gracias !

Publicado por Jhon (4 intervenciones) el 24/02/2020 19:09:29
Joel muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar