klaust: Bildslideshow

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!

  1. 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

    1. 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

      1. Hallo klaust,

        hier

        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

  2. 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

    --
    1/z ist kein Blatt Papier.