Banners rotativos

[dgateles 0]

Então pessoal, eu tenho um seguinte painel com 4 banners:

Eu gostaria de fazer o seguinte:

A cada quantidade X de tempo os 4 banners fossem atualizados, mudando para outros 4 banners diferentes e assim sucessivamente. Obs: sem atualizar a página, somente os banners.

O código que tenho atualmente é o seguinte:

</br><center>
<a href="#"><img src="{style_images_url}/banner-ex.jpg"></a> 
<a href="#"><img src="{style_images_url}/banner-ex.jpg"></a> 
<a href="#"><img src="{style_images_url}/banner-ex.jpg"></a> 
<a href="#"><img src="{style_images_url}/banner-ex.jpg"></a>
</center></br>

Como posso fazer isso? Grato!

[wilnet 92]

Oi dgateles, você já pesquisou sobre Banners Rotativos ou Randômicos sem refresh???

 

Tem vários scripts bons e prontos.

 

* Pois no seu caso acima só está com o CSS, teria que montar toda a lógica ainda.

 

* Também precisa saber se você irá usar somente javascript ou mesclar com alguma linguagem ou usar com banco de dados.

[dgateles 0]

Oi dgateles, você já pesquisou sobre Banners Rotativos ou Randômicos sem refresh???

 

Tem vários scripts bons e prontos.

 

* Pois no seu caso acima só está com o CSS, teria que montar toda a lógica ainda.

 

* Também precisa saber se você irá usar somente javascript ou mesclar com alguma linguagem ou usar com banco de dados.

Eu já pesquisei e todos ou maioria são slide-show, não é bem o que eu quero.

Seria uma coisa bem simples, do jeito mesmo que eu disse, onde eu defino quais são os banners e urls que eles apontam, pois são banners de anúncios. Bem simples mesmo, porém sou leigo e não sei como fazer, infelizmente. Se puder ajudar, agradeço!

 

Seria algo assim:

 

<script>
imagens = new Array();
//preencha com as imagens que vão aparecer
imagens[0]="{style_images_url}/banner-ex.jpg";
imagens[1]="{style_images_url}/banner-ex.jpg";
imagens[2]="{style_images_url}/banner-ex.jpg";
imagens[3]="{style_images_url}/banner-ex.jpg";
imagens[4]="{style_images_url}/banner-ex.jpg";
imagens[5]="{style_images_url}/banner-ex.jpg";
imagens[6]="{style_images_url}/banner-ex.jpg";
imagens[7]="{style_images_url}/banner-ex.jpg";
//Preencha com os respectivos links
links = new Array();
links[0] = "http://www.site0.com.br";
links[1] = "http://www.site1.com.br"; 
links[2] = "http://www.site2.com.br"; 
links[3] = "http://www.site3.com.br";
links[4] = "http://www.site4.com.br";
links[5] = "http://www.site5.com.br";
links[6] = "http://www.site6.com.br";
links[7] = "http://www.site7.com.br";
i=0;
function troca(){
if (i==imagens.length){
i=0;
}
document.getElementById('img1').src=imagens[i];
document.getElementById('banner').href=links[i];
i++;
}
</script>
</br> <center>
<a id="banner" href="#">
<img id="img1" src="" border="o">
<script> setInterval('troca()',12000) </script>
</a> </center> </br>

Só que em vez de exibir uma imagem só, seriam 4 (de 0 à 3 juntas igual a sceenshot) e depois mais 4 (de 4 à 7) e assim em diante... de 8 à 12...

[wilnet 92]

Veja se esse Link te ajuda com alguma luz.

 

Carrossel

[dgateles 0]

Veja se esse Link te ajuda com alguma luz.

 

Carrossel

Quase isso mas não é isso, além de ser um plugin para wordpress.

Seria o que eu mostrei no código acima mesmo, só que com 4 imagens com links destintos cada uma e que com o tempo mudasse para outras 4 imagem com outros links cada uma.