Webdesign, Tutorials und mehr - Webmasterpro.de

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