Bildslideshow
klaust
- html
Ich habe ein Bildslideshow erstellt die sich immer wiederholt.
Hier mein Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Fader mit Autostart</title>
<script type="text/javascript">
var FaderFramework = {
oldWinOnLoad: false,
inits: new Array(),
faders: new Object(),
init: function (einstellungen) {
var fader;
if (this.inits) {
this.inits[this.inits.length] = einstellungen;
} else {
fader = new this.Fader(einstellungen);
if (fader != false && !this.faders[fader.id]) {
this.faders[fader.id] = fader;
fader.next();
}
}
},
start: function () {
this.oldWinOnLoad = window.onload;
window.onload = function () {
if (typeof(FaderFramework.oldWinOnLoad) == "function") {
FaderFramework.oldWinOnLoad();
}
FaderFramework.onload();
};
},
onload: function () {
var i, fader, e = document.createElement("link");
e.type = "text/css";
e.rel = "stylesheet";
e.href = "fader-framework/fader-framework.css";
document.getElementsByTagName("head")[0].appendChild(e);
fader = this.inits;
delete this.inits;
for (i = 0; i < fader.length; i++) {
this.init(fader[i]);
}
},
Fader: function (einstellungen) {
if (!einstellungen.id || !document.getElementById(einstellungen.id)
|| FaderFramework.faders[einstellungen.id]
|| einstellungen.images.length < 2) {
return new Boolean(false);
}
var i, original = document.getElementById(einstellungen.id);
this.id = einstellungen.id;
this.images = new Array();
this.counter = false;
this.element = document.createElement("span");
this.element.className = "fader";
original.parentNode.replaceChild(this.element, original);
for (i = 0; i < einstellungen.images.length; i++) {
this.images[i] = document.createElement("img");
this.images[i].src = einstellungen.images[i];
this.images[i].alt = "Bild";
if (i == 0) {
this.element.appendChild(this.images[i]);
}
}
this.fade = function (step) {
var fader = this, imgs = this.element.getElementsByTagName("img");
step = step || 0;
imgs[1].style.opacity = step/100;
imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE?
step = step + 2;
if (step < 100) {
window.setTimeout(function () { fader.fade(step); }, 1);
} else {
imgs[1].className = "";
this.element.removeChild(imgs[0]);
window.setTimeout(function () { fader.next(); }, 2000);
}
};
this.next = function () {
this.counter = (this.counter < this.images.length -1) ? this.counter +1 : 0;
this.element.appendChild(this.images[this.counter]);
this.images[this.counter].className = "next";
this.fade();
};
}
};
FaderFramework.start();
</script>
<script type="text/javascript">
FaderFramework.init({
id: "fader1",
images: ["images/stories/ImgaesMTV/Volleyball/hobby1.jpg", "images/stories/ImgaesMTV/Volleyball/hobby2.jpg", "images/stories/ImgaesMTV/Volleyball/hobby3.jpg"]
});
</script>
</head><body>
<img src="images/stories/ImgaesMTV/Volleyball/hobby3.jpg" alt="Hobby" id="fader1">.</p>
</body></html>
Nun habe ich das Problem, dass beim Bildwechsel die Bilder kurz unterhalb des vorigen Bildes aufblitzen und dann erst auf die Position des ersten Bildes gehen. Ich bitte um Hilfe!
Hallo klaust,
Ich habe ein Bildslideshow erstellt die sich immer wiederholt.
Hier mein Quellcode:
ist das der Code von Felix's Faderframework?
http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/
Wenn ja, was hast du verändert?
Gibt es einen Onlinetest, den man sich mal ansehen kann?
Gruß, Jürgen
Hallo klaust,
Ich habe ein Bildslideshow erstellt die sich immer wiederholt.
Hier mein Quellcode:ist das der Code von Felix's Faderframework?
http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/
Wenn ja, was hast du verändert?
Gibt es einen Onlinetest, den man sich mal ansehen kann?
Gruß, Jürgen
hi ja, dass ist der Quellcode von hier
http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/framework3.htm
habe nur den zweiten fader gelöscht.
sehen kann man das ganze hier
hier
Hallo klaust,
Fehler über Fehler: doctype in der Mitte, mehrere bodys, falsche Attribute, ... . Das sieht so aus, als ob du die komplette Seite von Felix in deine Seite kopiert hast. Bring das erst mal in Ordnung. Hilfe findest du dabei beim Validator.
Dann diverse Scripte, wozu brauchst du die? Lass die erst mal weg. Wenn der Fader dann läuft, kannst du sie ja wieder einbauen.
Mein Vorschlag: Nimm den Originalfader und pass ihn dann in kleinen Schritten an dein Layout an.
Gruß, Jürgen
Om nah hoo pez nyeetz, klaust!
Nun habe ich das Problem, dass beim Bildwechsel die Bilder kurz unterhalb des vorigen Bildes aufblitzen und dann erst auf die Position des ersten Bildes gehen. Ich bitte um Hilfe!
http://forum.de.selfhtml.org/archiv/2012/6/t210170/#m1431753
Matthias