Javascript: Banner rotativo com efeito transitório

Vamos utilizar uma solução pronta e gratuita que está disponível, inclusive com exemplo, no site slayeroffice.com – imageCrossFade.

No caso deste exemplo, vamos precisar do seguinte:

xfade2.css

#imageContainer {
height:235px;
}

#imageContainer img {
display:none;
position:absolute;
top:0; left:0;
}

xfade2_o.css

#imageContainer {
position:relative;
margin:auto;
width:495px;
border:1px solid #000;
}

xfade2.js

/*****

Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com

Please leave this notice intact.

Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html

*****/

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;

// DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
// httpHypertext Transfer Protocol (ou o acrônimo HTTP; do inglês, Protocolo de Transferência de Hipertexto) é um protocolo de comunicação (na camada de aplicação segundo o Modelo OSI)://slayeroffice.com/code/imageCrossFade/xfade2.css
css = d.createElement("link");
css.setAttribute("href","xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);

imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;

setTimeout(so_xfade,1000);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;

nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,8000);
} else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

}

O arquivo js vem com um aviso. Ele alerta para que o arquivo css esteja na mesma pasta do arquivo js. Se estiverem em arquivos separaros, é preciso indicar o caminho até o arquivo.

Esta linha controla o tempo de troca entre as imagens:

setTimeout(so_xfade,8000);

No caso, a cada 8 segundos a imagem é alterada.

E por último, no seu htmlacrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto, as imagens que serão alteradas:

<div id="imageContainer">
<img src="imagem1.jpgPEG (ou JPG) é um método comumente usado para comprimir imagens fotográficas." width="495" height="235" alt="imagem">
<img src="imagem2.jpgPEG (ou JPG) é um método comumente usado para comprimir imagens fotográficas." width="495" height="235" alt="imagem">
<img src="imagem3.jpgPEG (ou JPG) é um método comumente usado para comprimir imagens fotográficas." width="495" height="235" alt="imagem">
<img src="imagem4.jpgPEG (ou JPG) é um método comumente usado para comprimir imagens fotográficas." width="495" height="235" alt="imagem">
</div>

Agora é só testar e ver o resultado. Você também pode ajustar a altura e largura das imagens. Basta alterar o width e height dos atributos img e nos arquivos css.

faça download do cod_banner

vi no:httpHypertext Transfer Protocol (ou o acrônimo HTTP; do inglês, Protocolo de Transferência de Hipertexto) é um protocolo de comunicação (na camada de aplicação segundo o Modelo OSI)://www.mariosam.com/