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:

<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...

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.

[ESerra 744]

Movendo para a área correta, JS.

[angelorubin 142]

Veja se ajuda - http://jsfiddle.net/angelorubin/fm8ch3dg/8/

[dgateles 0]

Veja se ajuda - http://jsfiddle.net/angelorubin/fm8ch3dg/8/

Cara muito obrigado de coração mesmo!

Mas elas trocam pela mesma imagem as 4 de uma vez, como eu faço para que cada uma troque por um banner diferente? Grato mais uma vez!

Edit: Ops! Troca por diferentes, eu que não percebi. Muito Obrigado novamente! Resolvido!

 

 

Veja se ajuda - http://jsfiddle.net/angelorubin/fm8ch3dg/8/

Tem um problema, quando alguém abre o meu forum com https:// as imagens não aparecem, sabe como resolver? Grato!

[angelorubin 142]

Você consegue acessar as imagens diretamente pelo navegador? Tenta ver o que o firebug mostra de erro (caso use firefox).

Veja se as dicas aqui ajudam - http://stackoverflow.com/questions/7918394/why-images-and-css-do-not-show-under-https

[dgateles 0]

Você consegue acessar as imagens diretamente pelo navegador? Tenta ver o que o firebug mostra de erro (caso use firefox).

Veja se as dicas aqui ajudam - http://stackoverflow.com/questions/7918394/why-images-and-css-do-not-show-under-https

Deu isso aqui:

3[blocked] The page at 'https://www.mmoservers.com.br/' was loaded over HTTPS, but ran insecure content from 'http://code.jquery.com/jquery-2.1.1.js': this content should also be loaded over HTTPS.
 (index):1
Uncaught TypeError: Cannot read property 'each' of null (index):1190
Uncaught TypeError: Cannot read property 'insert' of null ips.mcr.js:26
Dominio atual: https://www.mmoservers.com.br/ myscript.js:53
Failed to load resource: net::ERR_CACHE_MISS https://www.mmoservers.com.br/

Pelo Chrome, acho que o ssl não ta aceitando acessar o site do jquery. Vou baixar e add na hospedagem pra ver se resolve.

Edit: Era isso mesmo. Obrigado!