Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Como puedo cambiar una imagen y volver a la anterior?

JavaScript - Como puedo cambiar una imagen y volver a la anterior?

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Como puedo cambiar una imagen y volver a la anterior?

Publicado por Alan (1 intervención) el 29/08/2017 22:57:56
Hola
quiero saber como puedo hacer para que pueda cambiar las imagenes de siguiente a atras
soy nuevo en el foro nose si se tiene q postiar aqui lo que nesecito yo :S
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script language="javascript" src="js/jquery.min.js"></script>
</head>
<body>
 
	<center>
		<img name="imagen" src="" alt="">
		<img name="atras" onclick="cambiara(this);" src="espalda.png" alt="">
		<img onclick="cambiars(this)" src="proximo.png" alt="">
	</center>
	<hr>
	<center>
		<textarea rows="8" name="texto" cols="35" warp="virtual"></textarea>
	</center>
 
	<script language="JavaScript">
 
		var cambiara = new Array()
		cambiara[3]='img_3.png'
		cambiara[2]?'img_2.png'
		cambiara[1]='img_1.png'
 
		function cambiara(which) {
			imagen.src = cambiara[document.atras.atrasIndex]
			document.texto.value = cambiara[document.atras.atrasIndex]
		}
 
	</script>
 
</body>
</html>
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 Pedro
Val: 101
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como puedo cambiar una imagen y volver a la anterior?

Publicado por Pedro (9 intervenciones) el 30/08/2017 00:15:56
Te doy una algoritmia de solución a un ejercicio que hice en mi ciclo formativo pero responde perfectamente a lo que buscas.Como podrás apreciar la algoritmia de cada uno de nosotros es plural y por eso me gusta la programación porque cada uno hacemos las cosas según nos dicta nuestro brain.

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
60
61
62
63
64
65
66
67
68
69
70
71
/
//Cuando carga el documento html  llamo  función inicio

window.onload=inicio;
//Creo variable  document y una var contador para las imágenes

var d=document;
var cont=1;
 
//Función para controlar los eventos click y keydown

function inicio()
{
    d.getElementById("boton").addEventListener('click',primero,false);
    d.addEventListener('keydown',controlteclado);
}
/*=========================================>

Si se ha producido el evento keydown

  entramos en esta función que  comprueba 

  cual ha sido pulsada comprobando el keyCode

  y se realiza una cosa u otra dependiendo del

  keyCode

  =========================================>*/
function controlteclado(evento)
 
{
    var keyCode = evento.keyCode;
    if(keyCode==37)
    {
        if(cont>1)
        {
            cont--;
            /*Esta es la parte que te interesa obtengo elemento con id

              imguno y modifico su atributo src si aprecias lo que hago

               darle el path a la imagen más cont que será 1 2 o 3  y jpg

              como habrás comprendido las imágenes las tengo en el path

               imagenes como 1.jpg 2.jpg 3.jpg 

             */
            var img=d.getElementById('imguno');
            img.src='images/'+cont+'.jpg';
        }
    }
        if(keyCode==39)
        {   if(cont<4)
            {
                cont++;
                var img=d.getElementById('imguno');
                img.src='images/'+cont+'.jpg';
            }
        }
}
 
/*=========================================>

Esta función es para cargar la imagen n.-1

  compruebo en el  condicional que la imagen

  no está mostrada y si no está mostrada en-

  tonces le creo el elemento img con su atri

  buto correspondiente id para después poder

  lo  trabajar desde la otra función.

  =========================================>*/
function primero()
{   var com=d.getElementById('imguno');
    if(com==null)
    {
    /*Aquí creo de forma dinámica el elemento img 

      seteando  id="imguno" y le digo que carge 1.jpg

     */
    var imagen=d.createElement("img");
    imagen.setAttribute('id','imguno');
    imagen.src='images/1.jpg';
    d.getElementById('uno').appendChild(imagen);
 
    }
 }

Espero haberte ayudado
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 ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como puedo cambiar una imagen y volver a la anterior?

Publicado por ScriptShow (692 intervenciones) el 30/08/2017 13:08:07
Un ejemplo simple con botones:

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
<!DOCTYPE html>
 
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var which=0;
var cambiara=new Array("img_1.png","img_2.png","img_3.png");
 
function next() {
if(which<2)which++;
document.getElementById("imagen").src=cambiara[which];
}
 
function prev() {
if(which>0)which--;
document.getElementById("imagen").src=cambiara[which];
}
</script>
</head>
<body>
<p align="center">
<img id="imagen" src="" alt="">
<br>
<button onclick="prev()"> << </button>
<button onclick="next()"> >> </button>
</p>
<hr>
</body>
</html>

Espero sea útil.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar