En esta parte del tutorial veremos el método setInterval() que nos permitirá crear un temporizador que se repetirá tras un determinado número de milisegundos, como ejemplo veremos como crear un loop de imágenes que van cambiando tras un determinado tiempo. Con el método clearInterval() se puede impedir que el método setInterval() se vuelva a ejecutar.
El código de ejemplo del capítulo ...
<!DOCTYPE HTML>
<html>
<head>
<script>
var imagenes = [
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ1wW-edWpViZtGpCyBftACsKqWJ3ohjKCzudlTAsMF34iZ6LVDn14kiXAMOv3z-FnWCVBC6B5-uZ8G2PEdcqBsjrHgSLuemLoblKajZwkjC5R1b9JMh7bT2d4yl0rted-zyxlBYpTShBT/s1600/mujer-arbol.jpg",
"http://casalita.files.wordpress.com/2014/06/714.gif",
"http://www.periodicodecrecimientopersonal.com/wp-content/uploads/2013/09/cosmos.jpg"
];
var x=0;
function slider()
{
if (x > imagenes.length-1)
{
x = 0;
}
document.getElementById("imagen").src = imagenes[x];
x++;
}
temporizador = setInterval("slider()", 3000);
function stop()
{
clearInterval(temporizador);
}
function play()
{
temporizador = setInterval("slider()", 3000);
}
</script>
</head>
<body>
<img src="http://www.periodicodecrecimientopersonal.com/wp-content/uploads/2013/09/cosmos.jpg" id="imagen">
<button type="button" onclick="stop()">Stop</button>
<button type="button" onclick="play()">Play</button>
</body>
</html>
No hay comentarios:
Publicar un comentario