Código para cambiar una imagen de nuestra pagina cada 5 segundos por otra imagen de forma aleatoria con y sin enlace.
Imagen Sin Enlace
Creamos una pagina en html e insertamos el código, luego crear una carpeta, para nuestro ejemplo la denominamos imagenes donde vamos a poner en su interior las fotografias. Para este código de ejemplo, las imágenes se denominan 1.jpg, 2.jpg, 3.jpg y 4.jpg
[sourcecode language=”html”]<!DOCTYPE html>
<head>
<script>
/**
* Array con las imagenes que se iran mostrando en la web
*/
var imagenes=new Array(
‘img/1.jpg’,
‘img/2.jpg’,
‘img/3.jpg’,
‘img/4.jpg’
);
/**
* Funcion para cambiar la imagen
*/
function rotarImagenes()
{
// obtenemos un numero aleatorio entre 0 y la cantidad de imagenes que hay
var index=Math.floor((Math.random()*imagenes.length));
// cambiamos la imagen
document.getElementById("imagen").src=imagenes[index];
}
/**
* Función que se ejecuta una vez cargada la página
*/
onload=function()
{
// Cargamos una imagen aleatoria
rotarImagenes();
// Indicamos que cada 5 segundos cambie la imagen
setInterval(rotarImagenes,5000);
}
</script>
</head>
<body>
<img src="" id="imagen">
</body>
</html>[/sourcecode]
Imagen con Enlace
Copiamos el código en una pagina.html, lo guardamos y crearmos una carpeta imagenes donde ponemos en su interior las fotografias. Para este ejemplo, las imágenes se denominan 1.jpg, 2.jpg, 3.jpg y 4.jpg
[sourcecode language=”html”]<!DOCTYPE html>
<head>
<script>
/**
* Array con las imagenes y enlaces que se iran mostrando en la web
*/
var imagenes=new Array(
[‘img/1.jpg’,’http://www.hostperuweb.com’],
[‘img/2.jpg’,’http://www.hostperuweb.com’],
[‘img/3.jpg’,’http://www.hostperuweb.com’],
[‘img/4.jpg’,’http://www.hostperuweb.com’]
);
/**
* Funcion para cambiar la imagen y link
*/
function rotarImagenes()
{
// obtenemos un numero aleatorio entre 0 y la cantidad de imagenes que hay
var index=Math.floor((Math.random()*imagenes.length));
// cambiamos la imagen y la url
document.getElementById("imagen").src=imagenes[index][0];
document.getElementById("link").href=imagenes[index][1];
}
/**
* Función que se ejecuta una vez cargada la página
*/
onload=function()
{
// Cargamos una imagen aleatoria
rotarImagenes();
// Indicamos que cada 5 segundos cambie la imagen
setInterval(rotarImagenes,5000);
}
</script>
</head>
<body>
<a href="" id="link"><img src="" id="imagen"></a>
</body>
</html>[/sourcecode]
Podemos ver el ejm en el siguiente enlace