[SOLUCIONADO] Visor de imagenes

abarrero90 · #1 (**permalink**) 18/02/2013, 11:18

Buenas tardes a todos, soy nuevo en el tema de javascript. Estoy creando una aplicacion de visor de imágenes. ¿Alguien podría echarme un cable?.

Un saludo, muchas gracias.

Carlangueitor · #2 (**permalink**) 18/02/2013, 18:51

¿En qué necesitas ayuda?

Si necesitas ayuda desde el principio quizá lo que necesitas es un Libro de Javascript o un "visor" ya echo.

Saludos

abarrero90 · #3 (**permalink**) 20/02/2013, 13:54

Llevo dos días dándole y ya he sacado algo. El único problema que tengo, que no es poco, es que al intentar cambiar de imagen, el navegador se bloquea. ¿Alguien sabe a qué es debido?. Dejo el código aquí para que le echéis un vistazo.

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<TITLE> Visor de imagenes </TITLE>

<H1> <P ALIGN = CENTER> Visor de imagenes </P>

<script language="Javascript" type="text/javascript">

var img_array = new Array ("caballo1.png", "caballo2.png", "caballo3.png","caballo4.png")

var imagen_num = 0

function rotate() {

if (imagen_num > 3) {

imagen_num = 0
}

document.Source.src = img_array[imagen_num]

imagen_num++
setInterval(rotate(),1000); //--> contador de tiempo 1000ms = 1s
}
</script>
</HEAD>

<BODY onLoad = "rotate()">

<P ALIGN=CENTER> <img name = "Source" WIDTH= 256 HEIGHT=256 alt = "no hay" /> </P>

</BODY>

</HTML>

emprear · #4 (**permalink**) 20/02/2013, 14:46

Primero un error de sintáxis

setInterval('nombrefuncion()', tiempo en millisegundos);
como ves, el nombre de la función va entre comillas, segundo un mal uso de setInterval(), si querés repetir la función desde dentro de la misma utlizá setTimeout

Código HTML:

Ver originalfunction rotate(){
if (imagen_num > 3) {
imagen_num = 0;
}
img = document.Source;
img.src =img_array[imagen_num];
imagen_num++;
var t=setTimeout('rotate()',1000);
}
 
</script>
</HEAD>
<BODY onLoad = "rotate()">

si usases setInterval, eliminás el setTimeout y hacés

<BODY onLoad="setInterval('rotate()', 1000);">
Claro que utilizando este último, verias vacía la imagen durante 1 segundo
Lectura recomendada
http://www.webtaller.com/construccio..._javscript.php

Saludos

Carlangueitor · #5 (**permalink**) 20/02/2013, 15:08

Yo antes que nada te recomendaría un manual de HTML, viendo los errores (h1 dentro del head, p dentro del h1, h1 sin cerrar, atributos sin comillas) te hace falta: http://librosweb.es/xhtml/

abarrero90 · #6 (**permalink**) 20/02/2013, 15:39

Muchas gracias por las respuestas. Estoy en período de iniciación de este tipo de lenguajes, estoy en un curso en el que vamos a ver un poco de todo. Ya he conseguido arreglar el fallo.

Lo que he hecho ha sido otra función "intervalo()". Esta función crea el setInterval del "rotate()" y lo llamo desde el "onLoad()" del cuerpo del BODY.

Código HTML:

Ver originalfunction rotate() {
 
                imagen_num++
 
                if (imagen_num > 3) {
                    imagen_num = 0
                }
                document.Source.src = img_array[imagen_num]
            }
            function intervalo() {
                setInterval('rotate()',2000); //--> contador de tiempo 1000ms = 1
            }
        </script>
 
    <BODY onLoad = "intervalo()">
 
        <P ALIGN=CENTER> <img name = "Source"  WIDTH= 256 HEIGHT=256  alt = "no hay" /> </P>