Para uma transição de imagens
Olá pessoal, queria saber como parar um efeito de transição, tenho os scripts abaixo.
Uma página simples html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>slayeroffice | code | image cross fade redux</title>
<link rel="stylesheet" type="text/css" href="xfade2_o.css" />
<script type="text/javascript" src="xfade2.js"></script>
</head>
<body>
<div id="imageContainer">
<img src="imagens/1 (1).jpg" alt="" width="600" height="450" />
<img src="imagens/1 (2).jpg" alt="" width="600" height="399" />
<img src="imagens/1 (3).jpg" alt="" width="600" height="402" />
<img src="imagens/1 (4).jpg" alt="" width="600" height="449" />
</div>
</body>
</html>e um js para a trasição de imagens
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!
// http://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,3000);
}
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,1000);} 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) + ")";
}
}Peguei na net esse exemplo até porque não manjo nada de javascript, mas gostaria de uma ajuda para parar a transição de imagens quando coloco o mouse um cima, tipo com o onmouseover.
Alguma ideia?
:mellow:
Discussão (5)
Carregando comentários...