<script type="text/javascript"> function imageLine() { var checkInterval = null, imageLineInterval = null, currentImage = -1; /* Variablen die man in verschiedenen Funktionen benötigt */ images = new Array( '../../../image/image1.jpg', '../../../image/image2.jpg', '../../../image/image3.jpg', '../../../image/image4.jpg' // Diese Bilder sind die standard Windows XP Bilder ); // Alle Bilder die angezeigt werden sollen loadingImages = new Array(); // Dieses Array enthält später alle Objekte this.run = function() { checkInterval = window.setInterval('this.checkIfLoaded();', 100); // Alle 100 Millisekunden prüfen ob alle Bilder geladen sind for(i = 0;i < images.length;i++) { image = images[i]; loadingImages.push(new Image); loadingImages[i].src = image; } /* Alle Images in dem Array einzeln Durchgehen. Das Array für die Objekte mit den Objekten füllen. Dem neuen Objekt die Url des momentanen Bildes geben. */ } this.checkIfLoaded = function() { allLoaded = true; for(i = 0;i < loadingImages.length;i++) { loadingImage = loadingImages[i]; if(!loadingImage.complete) allLoaded = false; } /* Alle Objekte durchgehen. Prüfen ob das aktuelle Objekt / Bild geladen ist. Falls nicht dann die Variable zur Prüfung auf false setzen */ if(allLoaded) { // Wenn alle Objekte / Bilder geladen sind // Die Interval für das Prüfen löschen window.clearInterval(checkInterval); // Das erste Bild anzeigen this.startImageLine(); // Die Funktion für das Bilder wechseln alle 10 Sekunden ausführen window.setInterval('this.startImageLine();', 10000); } } this.startImageLine = function() { this.showImage(); // Bild anzeigen if(currentImage == (loadingImages.length - 1)) currentImage = 0; else currentImage += 1; /* Aktuelles Bild um eins hochzählen. Sollte das momentane Bild genau so groß sein, wie das Array dann wieder beim ersten anfangen. */ element = document.getElementById('imageline'); // Element für die Bilderanzeige element.style.height = loadingImages[currentImage].height + 'px'; element.style.width = loadingImages[currentImage].width + 'px'; // Dem Element die Breite und Höhe des momentanen Bildes geben element.style.backgroundImage = 'url(' + loadingImages[currentImage].src + ')'; // Dem Element das aktuelle Bild als Hintergrundbild setzen window.setTimeout('this.hideImage();', 9500); // Das Bild in 9,5 Sekunden ausblenden } this.hideImage = function() { element = document.getElementById('imageline'); for(i = 0;i <= 100;i++) window.setTimeout('element.style.filter = "Alpha(opacity=' + (100 - i) + ')"; element.style.MozOpacity = ' + (1 - i / 100) + '; element.style.opacity = ' + (1 - i / 100) + ';', i * 5); // Von 0 bis 100 (Prozent) // Das i * 5 dient dazu, dass das Ausblenden nicht zu schnell geht } this.showImage = function() { element = document.getElementById('imageline'); for(i = 0;i <= 100;i++) window.setTimeout('element.style.filter = "Alpha(opacity=' + i + ')"; element.style.MozOpacity = ' + i / 100 + '; element.style.opacity = ' + i / 100 + ';', i * 5); // Hier das selbe wie bei hideImage } this.run(); } window.onload = function() { imageLine(); } </script> <p id="imageline"></p>
Sie können den Quelltext auch verändern und durch Klick auf den Knopf sehen Sie dann gleich die Änderungen.
