Dado el siguiente código en JavaScript, correspondiente a una secuencia de imágenes:
var SecuenciaID = null
var imagen = 0
var duracion = 1000
{imagenes = new CreaArray(4)
imagenes[1].src = "img/g1.jpg"
imagenes[2].src = "img/g2.png"
imagenes[3].src = "img/g3.jpg"
imagenes[4].src = "img/g4.jpg"
}
function CreaArray(n) {
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = new Image()
}
return this
}
function MostrarSecuencia() {
{
document.images["secuencia"].src = imagenes[imagen].src
imagen++
if ( imagen == 5 )
imagen = 1
}
SecuenciaID = setTimeout("MostrarSecuencia()", duracion)
SecuenciaEjecutandose = true
}
function IniciarSecuencia() {
imagen = 1
MostrarSecuencia()
}
Realizar los siguientes ejercicios:
- Conseguir que se muestre la secuencia de imágenes.
- Hacer que el tiempo durante el cual se muestra cada imagen sea distinto.
- Modificar el tamaño de cada imagen.
- Añadir música de fondo (debe estar sonando continuamente).
- Hacer que cuando termine la música de fondo, se pare la secuencia de imágenes.
- Añadir botones que inicien o paren la secuencia.
NOTA: en los cuatro primero ejercicios, el código JavaScript se añadió directamente dentro del código HTML, pero en los dos últimos, se creó un fichero por separado al que se referenciaba desde la cabecera del HTML.
EJERCICIO 1
<html>
<script language="javascript" type="text/javascript">
var SecuenciaID = null
var imagen = 0
var duracion = 1000
{imagenes = new CreaArray(4)
imagenes[1].src = "img/g1.jpg"
imagenes[2].src = "img/g2.png"
imagenes[3].src = "img/g3.jpg"
imagenes[4].src = "img/g4.jpg"
}
function CreaArray(n) {
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = new Image()
}
return this
}
function MostrarSecuencia() {
{
document.images["secuencia"].src = imagenes[imagen].src
imagen++
if ( imagen == 5 )
imagen = 1
}
SecuenciaID = setTimeout("MostrarSecuencia()", duracion)
SecuenciaEjecutandose = true
}
function IniciarSecuencia() {
imagen = 1
MostrarSecuencia()
}
</script>
<body onload="IniciarSecuencia()">
<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
</body>
</html>
EJERCICIO 2
<html>
<script language="javascript" type="text/javascript">
<!-- DECLARACIÓN DE VARIABLES -->
var SecuenciaID = null
var imagen = 0
var tiempo = 1
<!-- ARRAY DE IMÁGENES -->
{imagenes = new CreaArray(4)
imagenes[1].src = "img/g1.jpg"
imagenes[2].src = "img/g2.png"
imagenes[3].src = "img/g3.jpg"
imagenes[4].src = "img/g4.jpg"
}
<!-- ARRAY DE "DURACIONES". Tiempo durante el cual se mostrará cada imagen -->
{duracion = new CreaArray2(4)
duracion[1] = 1000
duracion[2] = 2000
duracion[3] = 3000
duracion[4] = 4000
}
<!-- FUNCIONCES QUE DEBEMOS DEFINIR PARA CREAR LOS ARRAYS -->
function CreaArray(n) {
<!-- DEFINIMOS EL TAMAÑO DEL ARRAY -->
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = new Image()
}
return this
}
function CreaArray2(n) {
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = 0
}
return this
}
function MostrarSecuencia() {
{
<!-- A TODAS LAS IMÁGENES DE <body> CUYO NOMBRE SEA "Secuencia" -->
<!-- LE ASIGNAMOS LAS DEL ARRAY -->
document.images["secuencia"].src = imagenes[imagen].src
<!-- INCREMENTA EL VALOR DE "imagen" PARA QUE A CADA VUELTA MUESTRE LA -->
<!-- SIGUIENTE SI LLEGA AL FINAL, COMIENZA POR LA PRIMERA DE NUEVO. -->
imagen++
if ( imagen == 5 )
imagen = 1
}
<!-- setTimeout PERMITE EJECUTAR UNA FUNCIÓN PASADO CIERTO TIEMPO. -->
SecuenciaID = setTimeout("MostrarSecuencia()", duracion[tiempo])
tiempo++
if ( tiempo == 5 )
tiempo = 1
SecuenciaEjecutandose = true
}
function IniciarSecuencia() {
imagen = 1
MostrarSecuencia()
}
</script>
<body onload="IniciarSecuencia()">
<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
</body>
</html>
EJERCICIO 3
<html>
<script language="javascript" type="text/javascript">
<!-- DECLARACIÓN DE VARIABLES -->
var SecuenciaID = null
var imagen = 0
var tiempo = 1
<!-- ARRAY DE IMÁGENES -->
{imagenes = new CreaArray(4)
imagenes[1].src = "img/g1.jpg"
imagenes[2].src = "img/g2.png"
imagenes[3].src = "img/g3.jpg"
imagenes[4].src = "img/g4.jpg"
}
<!-- ARRAY DE "DURACIONES". Tiempo durante el cual se mostrará cada imagen -->
{duracion = new CreaArray2(4)
duracion[1] = 1000
duracion[2] = 2000
duracion[3] = 3000
duracion[4] = 4000
}
<!-- ARRAY DE "TAMAÑOS". Tamaño que irá tomando cada imagen -->
{size = new CreaArray2(4)
size[1] = 100
size[2] = 200
size[3] = 300
size[4] = 400
}
<!-- FUNCIONCES QUE DEBEMOS DEFINIR PARA CREAR LOS ARRAYS -->
function CreaArray(n) {
<!-- DEFINIMOS EL TAMAÑO DEL ARRAY -->
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = new Image()
}
return this
}
function CreaArray2(n) {
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = 0
}
return this
}
function MostrarSecuencia () {
{
<!-- DEFINIR TAMAÑO DE LAS IMÁGENES -->
document.images["secuencia"].width = size[imagen]
document.images["secuencia"].height = size[imagen]
<!-- A TODAS LAS IMÁGENES DE <body> CUYO NOMBRE SEA "Secuencia" -->
<!-- LE ASIGNAMOS LAS DEL ARRAY -->
document.images["secuencia"].src = imagenes[imagen].src
<!-- INCREMENTA EL VALOR DE "imagen" PARA QUE A CADA VUELTA MUESTRE LA -->
<!-- SIGUIENTE SI LLEGA AL FINAL, COMIENZA POR LA PRIMERA DE NUEVO. -->
imagen++
if ( imagen == 5 )
imagen = 1
}
<!-- setTimeout PERMITE EJECUTAR UNA FUNCIÓN PASADO CIERTO TIEMPO. -->
SecuenciaID = setTimeout("MostrarSecuencia()", duracion[tiempo])
tiempo++
if ( tiempo == 5 )
tiempo = 1
SecuenciaEjecutandose = true
}
function IniciarSecuencia() {
imagen = 1
MostrarSecuencia()
}
</script>
<body onload="IniciarSecuencia()">
<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
</body>
</html>
EJERCICIO 4
<html>
<script language="javascript" type="text/javascript">
<!-- DECLARACIÓN DE VARIABLES -->
var SecuenciaID = null
var imagen = 0
var tiempo = 1
<!-- ARRAY DE IMÁGENES -->
{imagenes = new CreaArray(4)
imagenes[1].src = "img/g1.jpg"
imagenes[2].src = "img/g2.png"
imagenes[3].src = "img/g3.jpg"
imagenes[4].src = "img/g4.jpg"
}
<!-- ARRAY DE "DURACIONES". Tiempo durante el cual se mostrará cada imagen -->
{duracion = new CreaArray2(4)
duracion[1] = 1000
duracion[2] = 2000
duracion[3] = 3000
duracion[4] = 4000
}
<!-- ARRAY DE "TAMAÑOS". Tamaño que irá tomando cada imagen -->
{size = new CreaArray2(4)
size[1] = 100
size[2] = 200
size[3] = 300
size[4] = 400
}
<!-- FUNCIONCES QUE DEBEMOS DEFINIR PARA CREAR LOS ARRAYS -->
function CreaArray(n) {
<!-- DEFINIMOS EL TAMAÑO DEL ARRAY -->
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = new Image()
}
return this
}
function CreaArray2(n) {
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = 0
}
return this
}
function MostrarSecuencia () {
{
<!-- DEFINIR TAMAÑO DE LAS IMÁGENES -->
document.images["secuencia"].width = size[imagen]
document.images["secuencia"].height = size[imagen]
<!-- A TODAS LAS IMÁGENES DE <body> CUYO NOMBRE SEA "Secuencia" -->
<!-- LE ASIGNAMOS LAS DEL ARRAY -->
document.images["secuencia"].src = imagenes[imagen].src
<!-- INCREMENTA EL VALOR DE "imagen" PARA QUE A CADA VUELTA MUESTRE LA -->
<!-- SIGUIENTE SI LLEGA AL FINAL, COMIENZA POR LA PRIMERA DE NUEVO. -->
imagen++
if ( imagen == 5 )
imagen = 1
}
<!-- setTimeout PERMITE EJECUTAR UNA FUNCIÓN PASADO CIERTO TIEMPO. -->
SecuenciaID = setTimeout("MostrarSecuencia()", duracion[tiempo])
tiempo++
if ( tiempo == 5 )
tiempo = 1
SecuenciaEjecutandose = true
}
function IniciarSecuencia() {
imagen = 1
MostrarSecuencia()
}
</script>
<body onload="IniciarSecuencia()">
<div id="1">
<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
</div>
<div id="2" style="position:absolute; top:300;">
<EMBED src="sound/summer.mp3" autostart="true" loop="true">
</div>
</body>
</html>
EJERCICIO 5
Fichero .js
//DECLARACIÓN DE VARIABLES
var SecuenciaID = null
var imagen = 0
var tiempo = 1
var cancion = 0
//ARRAY DE IMÁGENES
{imagenes = new CreaArray(4)
imagenes[1].src = "img/g1.jpg"
imagenes[2].src = "img/g2.png"
imagenes[3].src = "img/g3.jpg"
imagenes[4].src = "img/g4.jpg"
}
//ARRAY DE "DURACIONES". Tiempo durante el cual se mostrará cada imagen
{duracion = new CreaArray2(4)
duracion[1] = 1000
duracion[2] = 2000
duracion[3] = 3000
duracion[4] = 4000
}
//ARRAY DE "TAMAÑOS". Tamaño que irá tomando cada imagen
{size = new CreaArray2(4)
size[1] = 100
size[2] = 200
size[3] = 300
size[4] = 400
}
//FUNCIONCES QUE DEBEMOS DEFINIR PARA CREAR LOS ARRAYS
function CreaArray(n) {
//DEFINIMOS EL TAMAÑO DEL ARRAY
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = new Image()
}
return this
}
function CreaArray2(n) {
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = 0
}
return this
}
function MostrarSecuencia () {
{
//DEFINIR TAMAÑO DE LAS IMÁGENES
document.images["secuencia"].width = size[imagen]
document.images["secuencia"].height = size[imagen]
//A TODAS LAS IMÁGENES DE <body> CUYO NOMBRE SEA "Secuencia"
//LE ASIGNAMOS LAS DEL ARRAY
document.images["secuencia"].src = imagenes[imagen].src
//INCREMENTA EL VALOR DE "imagen" PARA QUE A CADA VUELTA MUESTRE LA
//SIGUIENTE SI LLEGA AL FINAL, COMIENZA POR LA PRIMERA DE NUEVO.
imagen ++
if ( imagen == 5 )
imagen = 1
}
cancion = cancion + duracion[tiempo]
if ( cancion <= 60000 ) {
//setTimeout PERMITE EJECUTAR UNA FUNCIÓN PASADO CIERTO TIEMPO.
SecuenciaID = setTimeout("MostrarSecuencia()", duracion[tiempo])
tiempo ++
if ( tiempo == 5 )
tiempo = 1
}
}
function IniciarSecuencia() {
imagen = 1
MostrarSecuencia()
}
Fichero .html
<html>
<head>
<script src="js/secuencia.js" language="javascript" type="text/javascript">
</script>
</head>
<body onload="IniciarSecuencia()">
<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
<EMBED src="sound/summer.mp3" autostart="true" loop="false" hidden="yes">
</body>
</html>
EJERCICIO 6
Fichero .js
//DECLARACIÓN DE VARIABLES
var SecuenciaID = null
var SecuenciaEjecutandose = null
var imagen = 1
//Inicialmente imagen vale 1 y eliminamos la función IniciarSecuencia
var tiempo = 1
//ARRAY DE IMÁGENES
{imagenes = new CreaArray(4)
imagenes[1].src = "img/g1.jpg"
imagenes[2].src = "img/g2.png"
imagenes[3].src = "img/g3.jpg"
imagenes[4].src = "img/g4.jpg"
}
//ARRAY DE "DURACIONES". Tiempo durante el cual se mostrará cada imagen
{duracion = new CreaArray2(4)
duracion[1] = 1000
duracion[2] = 2000
duracion[3] = 3000
duracion[4] = 4000
}
//ARRAY DE "TAMAÑOS". Tamaño que irá tomando cada imagen
{size = new CreaArray2(4)
size[1] = 100
size[2] = 200
size[3] = 300
size[4] = 400
}
//FUNCIONCES QUE DEBEMOS DEFINIR PARA CREAR LOS ARRAYS
function CreaArray(n) {
//DEFINIMOS EL TAMAÑO DEL ARRAY
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = new Image()
}
return this
}
function CreaArray2(n) {
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = 0
}
return this
}
function MostrarSecuencia () {
if ( SecuenciaEjecutandose == true ) {
//DEFINIR TAMAÑO DE LAS IMÁGENES
document.images["secuencia"].width = size[imagen]
document.images["secuencia"].height = size[imagen]
//A TODAS LAS IMÁGENES DE <body> CUYO NOMBRE SEA "Secuencia"
//LE ASIGNAMOS LAS DEL ARRAY
document.images["secuencia"].src = imagenes[imagen].src
//INCREMENTA EL VALOR DE "imagen" PARA QUE A CADA VUELTA MUESTRE LA
//SIGUIENTE. SI LLEGA AL FINAL, COMIENZA POR LA PRIMERA DE NUEVO.
imagen ++
if ( imagen == 5 )
imagen = 1
//setTimeout PERMITE EJECUTAR UNA FUNCIÓN PASADO CIERTO TIEMPO.
SecuenciaID = setTimeout("MostrarSecuencia()", duracion[tiempo])
tiempo ++
if ( tiempo == 5 )
tiempo = 1
}
}
function Iniciar () {
SecuenciaEjecutandose = true
MostrarSecuencia()
}
function Parar () {
SecuenciaEjecutandose = false
MostrarSecuencia()
}
Fichero .html
<html>
<head>
<script src="js/secuenciaConBotones.js" language="javascript" type="text/javascript">
</script>
</head>
<body>
<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
<EMBED src="sound/summer.mp3" autostart="true" loop="true" hidden="yes">
<input type="button" value="Iniciar secuencia" onClick="Iniciar()" style="position:absolute; left:500; top:50">
<input type="button" value="Parar secuencia" onClick="Parar()" style="position:absolute; left:500; top:150">
</body>
</html>
