nicki1993: Ein Problem mit JavaScript

Beitrag lesen

SELF-Forum

Ein Problem mit JavaScript

nicki1993
– Informationen zu den Bewertungsregeln

Hallo zusammen,
ich bin mal wieder fleißig am Webseiten bauen, habe jetzt aber ein kleines Problem: Auf einer Webseite sollen auf der Startseite drei "Leinwände" platziert werden, die jeweils abwechselnd vier verschiedene Bilder zeigen. Das passende Script hab ich mir hier besorgt.

Jetzt habe ich alles soweit angepasst, allerdings wurde bis eben immer nur einer der drei divs mit Leben gefüllt. Also hae ich das ganze etwas abgewandelt und habe jetzt für jeden div ein Script. Und siehe da, alle divs verfügen nun über ein Bild, allerdings wechseln immer nur die Bilder des ersten divs. Und selbst da wechseln sich die Bilder nicht alle 3 Sekunden ab, sondern in einem sehr ungewöhnlichen Takt. Jetzt kommt die Frage:
Warum? Und was kann man dagegen machen?

Was ihr noch wissen solltet: Ich habe so gut wie keine Ahnung von Javascript...

Hier der Quelltext, das CSS und das Script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
        "http://www.w3.org/TR/html4/loose.dtd">  
<html lang="de">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Startseite - Schöngeist Dekoration </title>  
<link href="template.css" rel="stylesheet" type="text/css" />  
<script type="text/javascript" src="xfade3.js"></script>  
<script type="text/javascript" src="xfade2.js"></script>  
<script type="text/javascript" src="xfade1.js"></script>  
</head>  
  
<body id="index" >  
<div id="wrapper">  
<div id="header">  
</div>  
<div id="nav">  
  <ul>  
    <li class="index"><a href="index.htm">Startseite</a></li>  
    <li class="kontakt_impressum"><a href="kontakt_impressum.htm">Kontakt / Impressum</a></li>  
  </ul>  
  </div>  
  
  
<div id="maintext">  
  <img src="images/herzlich_willkommen.png" id="heading"><br><hr><br>  
  <div id="imageContainerleft" class="left">  
		<img src="images/bild01.jpg" width="240" height="160">  
		<img src="images/bild06.jpg" width="240" height="160">  
		<img src="images/bild08.jpg" width="240" height="160">  
		<img src="images/bild09.jpg" width="240" height="160">  
		  
	</div>  
	<div id="imageContainercenter" class="center">  
		<img src="images/bild05.jpg" width="240" height="160">  
		<img src="images/bild02.jpg" width="240" height="160">  
		<img src="images/bild07.jpg" width="240" height="160">  
		<img src="images/bild04.jpg" width="240" height="160">  
	</div>  
	<div id="imageContainerright" class="right">  
		<img src="images/bild03.jpg" width="240" height="160">  
		<img src="images/bild10.jpg" width="240" height="160">  
		<img src="images/bild11.jpg" width="240" height="160">  
		<img src="images/bild12.jpg" width="240" height="160">  
  
	</div>  
	<p class="content"> ......

#imageContainerleft {  
height: 160px;  
width: 240px;  
position: absolute;  
border: 2px solid #ffffff;  
 margin-bottom: 4px; }  
  
  
  
#imageContainercenter {  
    margin-left: 260px;  
    height: 160px;  
width: 240px;  
position: absolute;  
border: 2px solid #ffffff;  
 margin-bottom: 4px;  
}  
  
#imageContainerright {  
    margin-left: 520px;  
    height: 160px;  
width: 240px;  
position: absolute;  
border: 2px solid #ffffff;  
 margin-bottom: 4px;  
}  
  
#imageContainerleft img{  
	display:none;  
	position:absolute;  
	top:0; left:0;  
}  
  
#imageContainercenter img{  
	display:none;  
	position:absolute;  
	top:0; left:0;  
}  
  
#imageContainerright img {  
	display:none;  
	position:absolute;  
	top:0; left:0;  
}

Die verschieden Scripte (xfade1.js, xfade2.js, xfade3.js) entscheiden sich nur darin, dass imageContainerleft durch imageContainercenter oder imageContainerright ersetzt wird.

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("imageContainerleft").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,3000);  
	} 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) + ")";  
	}  
	  
}

Ich freue mich über eure Hilfe ;)

mfg nicki1993

Beitrag melden
–
Informationen zu den Bewertungsregeln