Cómo rotar banners en HTML

iniciopublic

iniciopublic Seguir

Préstamo
Pi
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Desde
16 Jul 2013
Mensajes
5.060
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?
 
L

lest

Beta
Social Media
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Nov 2013
Mensajes
59
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

OLMID

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
14 Oct 2009
Mensajes
347
Con este script se cambia el banner aleatoriamente cada vez que refresque o cambie de página

HTML: 
<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 :)
 
M

matyimpacto

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
12 Mar 2013
Mensajes
185
Como seria para agregarla un link a la imagen amigo? :)
OLMID dijo:
Con este script se cambia el banner aleatoriamente cada vez que refresque o cambie de página

HTML: 
<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 :)
Hacer clic para expandir...
 
OLMID

OLMID

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
14 Oct 2009
Mensajes
347
Quedaría así:

HTML: 
<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

tribunaram

Lambda
Redactor
Desde
7 Dic 2011
Mensajes
2.785
Y ya para colmo, que aparezca un texto sobre la imagen?
OLMID dijo:
Quedaría así:

HTML: 
<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
Hacer clic para expandir...
 
OLMID

OLMID

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
14 Oct 2009
Mensajes
347
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
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
HTML: 
.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 :)
 
M

metalgear

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
29 Oct 2014
Mensajes
88
Si quieres ponerle un tiempo de 20 segundos entre cada banner como harias ?
 
Carambel

Carambel

Ómicron
Social Media
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
25 Ago 2013
Mensajes
4.932
Con css oviamente sera mucho mas ligero, si es en modo hover seria genial ya que queda elegante.
 
Hay que estar conectado o registrado para responder aquí.
Arriba