Como rotar banners em HTML

iniciopublic · 04/12/2013

olá a todos, tenho uma dúvida, tenho vários banners os quais gostaria que rotacionassem em um certo tempo ou pelo menos que mudassem no momento de atualizar o navegador

como posso fazer isso em html?

feltoxXx · 04/12/2013

Abraços... eis aqui um bom lugar para ler um pouquinho... https://www.google.co.ve/#q=rotar+imagenes+en+html

iniciopublic · 04/12/2013

feltoxXx disse:
Abraços... eis aqui um bom lugar para ler um pouquinho... https://www.google.co.ve/#q=rotar+imagenes+en+html

se estivesse no google eu não teria perguntado

Emanuel Andrei · 05/12/2013

Aqui você tem. E sim, está no google 😛
http://notoyontoy.jimdo.com/blog/carrusel-de-imagenes-facil-de-crearlo/

Enviado do meu GT-P5100 usando Tapatalk 2

lest · 10/12/2013

com html puro a única forma é com um slideshow, procure no google, há centenas de exemplos... se usar alguma linguagem do lado do servidor seria outra coisa.

OLMID · 11/12/2013

Com este script o banner muda aleatoriamente cada vez que você atualiza ou muda 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>

Adapte-o na página ou modelo que quiser
Pode adicionar mais imagens mudando o 3 de new array pela quantidade e adicionando as linhas de imagens

DEMO
FONTE

Abraços 🙂

matyimpacto · 11/12/2013

Como seria para adicionar um link à imagem amigo? 🙂

OLMID disse:
Com este script o banner muda aleatoriamente cada vez que você atualiza ou muda 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>

Adapte-o na página ou modelo que quiser
Pode adicionar mais imagens mudando o 3 de new array pela quantidade e adicionando as linhas de imagens

DEMO
FONTE

Abraços 🙂

OLMID · 11/12/2013

Ficaria assim:

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>

Abraços

tribunaram · 13/12/2013

E para completar, como fazer aparecer um texto sobre a imagem?

OLMID disse:

Ficaria assim:

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>

Abraços

OLMID · 14/12/2013

Pode ser feito de várias formas, uma simples pode ser assim
Coloquei no script o código html e o css vai à parte para que fique mais claro

O script com o 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>

E o 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

Abraços 🙂

metalgear · 11/04/2015

Se quiser colocar um tempo de 20 segundos entre cada banner, como faria?

Carambel · 13/04/2015

Com css obviamente será muito mais leve, se for em modo hover seria genial já que fica elegante.

Como rotar banners em HTML

iniciopublic

feltoxXx

iniciopublic

Emanuel Andrei

lest

OLMID

matyimpacto

OLMID

tribunaram

OLMID

metalgear

Carambel

Tópicos similares