Merkwürdiges Faderphänomen

Netzwerkidi · 1. Juni 2011

Hallo zusammen,

ich teste gerade den Selfhtml-Fader und checke, ob ich den leicht auf meine Bedürfnisse anpassen kann. Ziel ist, ohne Javascript-Library.

Dabei fällt mir auf, dass die Fading-Dauer offenbar rapide zunimmt, wenn man in der Routine, in dem das Bilder-Array aufgebaut wird, Breite und Länge für die Bilder vorgibt (siehe Stelle im Code unten). Aber nur im Internet-Explorer. Opera und Firefox sind gleich schnell - ob mit oder ohne Größenvorgabe.

Für den Fall, die Bilder unterschiedlich groß sind, sollen diese alle identisch groß dargestellt werden.

Vielleicht hat da einer eine Erklärung, ist mir völlig schleierhaft.

Merci + Grüße
Idi

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Endlose Slideshow</title>
	<script type="text/javascript">
		function Fader(einstellungen) {
			if (!einstellungen.id || !document.getElementById(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 = 0;

			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";
				
				/* ***********************  

				this.images[i].width=760;
				this.images[i].height=510;

				   *********************** */

				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();
			};
		}

		function erstelleFader () {
			var einstellungen = {
				id: "slideshow",
				images: ["http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/images/fliegen1.jpg", 
                 "http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/images/fliegen2.jpg", 
                 "http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/images/fliegen3.jpg", 
                 "http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/images/fliegen4.jpg", 
                 "http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/images/fliegen5.jpg", 
                 "http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/images/fliegen6.jpg"]
			};

			if (!window.meine_slideshow) {
				window.meine_slideshow = new Fader(einstellungen);
			}
		}
	</script>
	<style type="text/css">
		.next { position: absolute; top: 0; left: 0; opacity: 0; filter:alpha(opacity=0); }
		.fader { position: relative; display: inline-block; }
		.fader img { vertical-align: top; }
	</style>
</head><body>
	<h1>Endlose Slideshow</h1>
	<p>Der Fader: <img src="http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/images/fliegen1.jpg" alt="" id="slideshow"></p>
	<p>Fader <a href="javascript:erstelleFader()">erzeugen</a> und
		<a href="#" onclick="if (window.meine_slideshow) { meine_slideshow.next(); this.onclick = function () { return false; }; } return false;">starten</a></p>

	<p><img height="10" width="15" alt="Seite" src="http://src.selfhtml.org/dok.gif">&nbsp;<a href="geaenderter_ansatz.htm#endlos_slideshow">Zurück zum Artikel</a></p>
</body></html>

Merkwürdiges Faderphänomen

Netzwerkidi

Neue Beiträge