Cómo rotar banners en HTML

[iniciopublic]

hola todos tengo una duda tengo varios banners el cual quisiera que se rotaran en cierto tiempo o por lo menos se cambie al momento de actualizar el navegador


¿como puedo hacerlo en html?

 

[feltoxXx]

Saludos... he aqui un buen lugar para leer un poquito... https://www.google.co.ve/#q=rotar+imagenes+en+html

 

[iniciopublic]

Saludos... he aqui un buen lugar para leer un poquito... https://www.google.co.ve/#q=rotar+imagenes+en+html

si estuviera en google no lo hubiera preguntado

 

[Emanuel Andrei]

Aqui lo tienes. Y si que esta en google 😛
http://notoyontoy.jimdo.com/blog/carrusel-de-imagenes-facil-de-crearlo/

Enviado desde mi GT-P5100 usando Tapatalk 2

 

[lest]

con html puro la única forma es con un slideshow busca en google hay cientos de ejemplos... si usas algún lenguaje del lado de servidor seria otra cosa.

 

[OLMID]

Con este script se cambia el banner aleatoriamente cada vez que refresque o cambie de página

<script language='JavaScript'>
imagenes = new Array(3)

imagenes[0] = "<img border='0' src='URL de la imagen' style='position:absolute; top:0; left:0;width:300px;height:200px;'/>"
imagenes[1] = "<img border='0' src='URL de la imagen' style='position:absolute; top:0; left:0;width:300px;height:200px;'/>"
imagenes[2] = "<img border='0' src='URL de la imagen' style='position:absolute; top:0; left:0;width:300px;height:200px;'/>"

aleatorio = Math.random() * (imagenes.length)
aleatorio = Math.floor(aleatorio)
document.write(imagenes[aleatorio])

</script>

Adáptalo en la página o plantilla que quieras
Puedes añadir más imágenes cambiando el 3 de new array por la cantidad y añadiendo las lineas de imagenes

DEMO
FUENTE

Saludos 🙂

 

[matyimpacto]

Como seria para agregarla un link a la imagen amigo? 🙂

Con este script se cambia el banner aleatoriamente cada vez que refresque o cambie de página

<script language='JavaScript'>
imagenes = new Array(3)

imagenes[0] = "<img border='0' src='URL de la imagen' style='position:absolute; top:0; left:0;width:300px;height:200px;'/>"
imagenes[1] = "<img border='0' src='URL de la imagen' style='position:absolute; top:0; left:0;width:300px;height:200px;'/>"
imagenes[2] = "<img border='0' src='URL de la imagen' style='position:absolute; top:0; left:0;width:300px;height:200px;'/>"

aleatorio = Math.random() * (imagenes.length)
aleatorio = Math.floor(aleatorio)
document.write(imagenes[aleatorio])

</script>

Adáptalo en la página o plantilla que quieras
Puedes añadir más imágenes cambiando el 3 de new array por la cantidad y añadiendo las lineas de imagenes

DEMO
FUENTE

Saludos 🙂

 

[OLMID]

Quedaría así:

<script language='JavaScript'>
imagenes = new Array(3)

imagenes[0] = "<a href='AQUI EL ENLACE' style='position:absolute; top:0; left:0;text-decoration:none;'><img border='0' src='URL de la imagen' style='width:300px;height:200px;'/></a>"
imagenes[1] = "<a href='AQUI EL ENLACE' style='position:absolute; top:0; left:0;text-decoration:none;'><img border='0' src='URL de la imagen' style='width:300px;height:200px;'/></a>"
imagenes[2] = "<a href='AQUI EL ENLACE' style='position:absolute; top:0; left:0;text-decoration:none;'><img border='0' src='URL de la imagen' style='width:300px;height:200px;'/></a>"

aleatorio = Math.random() * (imagenes.length)
aleatorio = Math.floor(aleatorio)
document.write(imagenes[aleatorio])

</script>

Saludos

 

[tribunaram]

Y ya para colmo, que aparezca un texto sobre la imagen?

Quedaría así:

<script language='JavaScript'>
imagenes = new Array(3)

imagenes[0] = "<a href='AQUI EL ENLACE' style='position:absolute; top:0; left:0;text-decoration:none;'><img border='0' src='URL de la imagen' style='width:300px;height:200px;'/></a>"
imagenes[1] = "<a href='AQUI EL ENLACE' style='position:absolute; top:0; left:0;text-decoration:none;'><img border='0' src='URL de la imagen' style='width:300px;height:200px;'/></a>"
imagenes[2] = "<a href='AQUI EL ENLACE' style='position:absolute; top:0; left:0;text-decoration:none;'><img border='0' src='URL de la imagen' style='width:300px;height:200px;'/></a>"

aleatorio = Math.random() * (imagenes.length)
aleatorio = Math.floor(aleatorio)
document.write(imagenes[aleatorio])

</script>

Saludos

 

[OLMID]

Se puede hacer de varias formas, una sencilla puede ser así
He puesto en el script el código html y el css va aparte para que se vea más claro

El script con el html

<script language='JavaScript'>
imagenes = new Array(3)

imagenes[0] = "<a class='banner' href='AQUI EL ENLACE'><img border='0' src='URL de la imagen' /><span>TEXTO 1</span></a>"
imagenes[1] = "<a class='banner' href='AQUI EL ENLACE'><img border='0' src='URL de la imagen' /><span>TEXTO 2</span></a>"
imagenes[2] = "<a class='banner' href='AQUI EL ENLACE'><img border='0' src='URL de la imagen' /><span>TEXTO 3</span></a>"

aleatorio = Math.random() * (imagenes.length)
aleatorio = Math.floor(aleatorio)
document.write(imagenes[aleatorio])

</script>

Y el CSS

.banner{
position:relative; 
top:0; 
left:0;
text-decoration:none;
color:#fff;
}
    .banner:hover{
    color: aqua;
    }

.banner img{
width:300px;
height:200px;
}

.banner span{
position:absolute; 
bottom:10px; 
right:10px;
font:normal bold 18px Georgia, Verdana;
}

DEMO

Saludos 🙂

 

[metalgear]

Si quieres ponerle un tiempo de 20 segundos entre cada banner como harias ?

 

[Carambel]

Con css oviamente sera mucho mas ligero, si es en modo hover seria genial ya que queda elegante.