« anterior próximo »
Páginas: [1]

Autor Tema: Crear slider imágenes JavaScript document.getElementById src alt title CU01127E  (Leído 4532 veces)

jbodenser

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 28
    • Ver Perfil
Crear slider imágenes JavaScript document.getElementById src alt title CU01127E
« en: 27 de Noviembre 2015, 22:38 »
Hola, quiero comprobar si mis respuestas al ejercicio CU01127E del tutorial son correctas.

1 - El código funciona correctamente.

2 - Lo que ocurre al poner la variable (numeroImagenActual = 9) dentro de la funcion es que siempre que la llamemos se asigna la variable a 9, entonces las condiciones (if numeroImagenActual == 11) e (if numeroImagenActual == 6) nunca se cumplen, entonces el código no funciona correctamente.

3 - El código modificado es el siguiente.

Código: [Seleccionar]
<html><head><title>Curso JavaScript aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {margin:20px;}
#contenedor {width:405px;margin:auto;}
#adelante, #atras {padding:15px; width: 130px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function moverImagen(movimiento) {
var numeroImagenActual = 9;
var carousel, valorSrc = [], valorAlt = [], valorTitle = [];
carousel = document.getElementById('imgCarrusel');
valorSrc[0] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
valorSrc[1] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
valorSrc[2] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';

valorAlt[0] = 'Camiseta 9 aprenderaprogramar.com';
valorAlt[1] = 'Camiseta 6 aprenderaprogramar.com';
valorAlt[2] = 'Camiseta 11 aprenderaprogramar.com';

valorTitle[0] = 'Diálogo entre informáticos';
valorTitle[1] = 'Desbordado por los números';
valorTitle[2] ='Estudiando programacion';

if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {
alert ('No es posible hacer ese movimiento');
}
if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {
valorNuevoNumeroImagen = 9;
carousel.src = valorSrc[0];
carousel.alt = valorAlt[0];
carousel.title = valorTitle[0];
}
if (numeroImagenActual == 9 && movimiento == 'atras') {
valorNuevoNumeroImagen = 6;
carousel.src = valorSrc[1];
carousel.alt = valorAlt[1];
carousel.title = valorTitle[1];
document.getElementById('numeracion').nodeValue = '99';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
carousel.src = valorSrc[2];
carousel.alt = valorAlt[2];
carousel.title = valorTitle[2];
}
numeroImagenActual = valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;
}
</script>
</head>
<body>
<div >
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>
<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>
</div>
</div>
</body>
</html>

4 - Cuando duplicamos el código solo se cambia la imagen de arriba, porque JavaScript devuelve los primeros elementos con los atributos ID que encuentra.

Muchas gracias a todos.
« Última modificación: 29 de Noviembre 2015, 17:23 por Ogramar »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:Crear slider imágenes JavaScript document.getElementById src alt title CU01127E
« Respuesta #1 en: 29 de Noviembre 2015, 17:30 »
Buenas jbodenser

He probado tu código pero parece que algo no va bien. Si empiezo y voy hacia delante, me pasa de la camiseta 9 a la 11, pero después si le doy a ir hacia atrás en lugar de volver a la 9 se va directamente a la 6. En cambio en el código original sí funciona bien, deberías revisarlo para corregir esto.

Salu2
En línea

jbodenser

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 28
    • Ver Perfil
Re:Crear slider imágenes JavaScript document.getElementById src alt title CU01127E
« Respuesta #2 en: 29 de Noviembre 2015, 23:25 »
Pues es lo que pasa cuando se deja la variable dentro de la función. Copié el código luego de hacer la prueba.

Aquí está corregida.

Código: [Seleccionar]
<html><head><title>Curso JavaScript aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {margin:20px;}
#contenedor {width:405px;margin:auto;}
#adelante, #atras {padding:15px; width: 130px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var numeroImagenActual = 9;
function moverImagen(movimiento) {
var carousel, valorSrc = [], valorAlt = [], valorTitle = [];
carousel = document.getElementById('imgCarrusel');
valorSrc[0] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
valorSrc[1] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
valorSrc[2] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';

valorAlt[0] = 'Camiseta 9 aprenderaprogramar.com';
valorAlt[1] = 'Camiseta 6 aprenderaprogramar.com';
valorAlt[2] = 'Camiseta 11 aprenderaprogramar.com';

valorTitle[0] = 'Diálogo entre informáticos';
valorTitle[1] = 'Desbordado por los números';
valorTitle[2] ='Estudiando programacion';

if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {
alert ('No es posible hacer ese movimiento');
}
if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {
valorNuevoNumeroImagen = 9;
carousel.src = valorSrc[0];
carousel.alt = valorAlt[0];
carousel.title = valorTitle[0];
}
if (numeroImagenActual == 9 && movimiento == 'atras') {
valorNuevoNumeroImagen = 6;
carousel.src = valorSrc[1];
carousel.alt = valorAlt[1];
carousel.title = valorTitle[1];
document.getElementById('numeracion').nodeValue = '99';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
carousel.src = valorSrc[2];
carousel.alt = valorAlt[2];
carousel.title = valorTitle[2];
}
numeroImagenActual = valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;
}
</script>
</head>
<body>
<div >
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>
<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>
</div>
</div>
</body>
</html>

Saludos
« Última modificación: 30 de Noviembre 2015, 13:07 por Ogramar »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:Crear slider imágenes JavaScript document.getElementById src alt title CU01127E
« Respuesta #3 en: 30 de Noviembre 2015, 13:12 »
Buenas

Hay una línea a  la que no acabo de encontrarle sentido - utilidad

Código: [Seleccionar]
document.getElementById('numeracion').nodeValue = '99';
¿Para qué introduces esta línea?

Salu2
En línea

jbodenser

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 28
    • Ver Perfil
Re:Crear slider imágenes JavaScript document.getElementById src alt title CU01127E
« Respuesta #4 en: 30 de Noviembre 2015, 22:49 »
La verdad es que yo no la introduje, si no que está así en el ejercicio. saludos.
« Última modificación: 01 de Diciembre 2015, 08:16 por Ogramar »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:Crear slider imágenes JavaScript document.getElementById src alt title CU01127E
« Respuesta #5 en: 01 de Diciembre 2015, 08:18 »
Tienes razón, no me había dado cuenta. Voy a comentarlo para eliminarla porque esa línea no tiene utilidad. De resto tu código está bien  :D

Salu2
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".