Gå til innhold

Cross Fade - jeg har kode og alt materiale, men..

gonzalez7

Anbefalte innlegg

gonzalez7

gonzalez7

Skrevet
Skrevet (endret)

Jeg skulle hatt denne effekten: http://slayeroffice.com/code/imageCrossFade/xfade2.html

 

Brukt koder/filer som vist nedenfor. Bildene har jeg i "images". Det første bildet mitt dukker opp der det skal, og har riktig fade-effekt, men neste bildet dukker opp nedenfor og hopper opp på riktig plass.

 

Fått beskjed om at jeg ikke skulle lage .js-filen, men gjorde det likevel. Først da jeg klarte å få noen effekt i det hele tatt.

 

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="style.css" />
<script type="text/javascript" src="xfade2.js"></script>
</head>
<script type="text/javascript">
</script>
<div style="text-align:center;">
<script type="text/javascript"
</script>
</div>
<body>
<div id="imageContainer">
	<img src="images/bilde1.png" width="500" height="309" alt="Bilde1" />
	<img src="images/bilde2.png" width="500" height="309" alt="Bilde2" />
	<img src="images/bilde3.png" width="500" height="309" alt="Bilde3" />
	<img src="images/bilde4.png" width="500" height="309" alt="Bilde4" />
	<img src="images/bilde5.png" width="500" height="309" alt="Bilde5" />
	<img src="images/bilde6.png" width="500" height="309" alt="Bilde6" />
</div>

</body>
</html>

 

Css (style.css):

#imageContainer{width: 500px; height: 300px;}

 

Javascript (xfade2.js)

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,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,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) + ")";
}

}

Endret av gonzalez7
Lenke til kommentar

Videoannonse

Videoannonse
Annonse

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...