nicht angemeldet
Ein Problem mit JavaScript
Gunnar BittersmannHallo 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
-
Die verschieden Scripte (xfade1.js, xfade2.js, xfade3.js) entscheiden sich nur darin, dass imageContainerleft durch imageContainercenter oder imageContainerright ersetzt wird.
Ist diese Änderung gespeichert und lädst Du die Seite _nicht_ aus dem Cache?
Ich freue mich über eure Hilfe ;)
Wir uns über den Link zu Deiner Seite.
Cheers,
Baba-
Hallo,
Ist diese Änderung gespeichert und lädst Du die Seite _nicht_ aus dem Cache?
Wie genau meinst du das?
Der Link der Seite lautet niklashoffmann.bplaced.net ;)
mdf nicki1993
-
Danke für den Link.
Das Problem ist, dass sich alle drei Fader die gleichen Javascriptvariablen teilen. Insbesondere imgs[]. Das kannst Du nur mit dem objektorientierten Ansatz lösen, der im Posting von Gunnar verlinkt wurde.
Cheers,
Baba-
Danke für die schnelle Hilfe.
Sowas habe ich schon lange gesucht :)
-
-
-
-
@@nicki1993:
nuqneH
Der kleine Lehrgang zum vernünftigen Schreiben eines JavaScripts dürfte was für dich sein. Mit dem Fader-Framework kann man mühelos mehrere Slideshows auf einer Seite realisieren.
Qapla'
--
Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí) -
Lieber nicki1993,
Was ihr noch wissen solltet: Ich habe so gut wie keine Ahnung von Javascript...
solange Du das nicht änderst, wird das höchst wahrscheinlich nix gescheites. Aber Gunnar hat Dir ja schon passende Links gegeben...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)