Bildershow: Langsames ein- und Ausblenden von Bildern

von Benutzer gelöscht | 0 | 27175 Aufrufe

Anzeige Hier werben

Ziel

Wir wollen eine Bildershow erstellen. In dieser Bildershow sollen Bilder aus- und eingeblendet werden.
Das Ein- wie das Ausblenden soll langsam geschehen, auch "fade" genannt.
Die Billder sollen alle 10 Sekunden ausgetauscht werden und wenn nötig wieder von vorne anfangen wenn das letzte Bild erreicht ist.

Benötigte Funktionen / Objekte / Eigenschaften

JavaScript

Funktionsname
Parameter
Beschreibung
window.setInterval
1. Aufruf der Funktion / der Anweisung
2. Alle x Millisekunden
Durch diese Funktion wird die im 1. Parameter angebene Funktion / Anweisung alle die im 2. Parameter angebene Millisekunden ausgeführt
window.clearInterval
1. Variable, die die Interval gespeichert hat
Diese Funktion löscht die im Parameter gespeicherte Interval
window.setTimeout
1. Aufruf der Funktion / der Anweisung
2. In x Millisekunden
Diese Funktion gleicht sich fast Komplett im setInterval.
Der Unterschied ist allerdings, dass die angegebene Funktion / Anweisung nur einmal ausgeführt wird.
new Image
Ist ein Objekt
new Image ist ein Objekt und wird als vorladen für Bilder benutzt
Mehr hier nachzulesen: http://de.selfhtml.org/javascript/objekte/images.htm

CSS

Eigenschaft
Wert
Beschreibung
-moz-opacity
0.4
Die Transparenz Angabe für den Firefox / Mozilla (Von 0 - 1)
filter
Alpha(opacity=40)
Die Transparenz Angabe für den Internet Explorer (Von 0 - 100)
opacity
0.4
Die Transparenz Angabe für den Opera (Von 0 - 1)

Das HTML

Das HTML besteht eigentlich nur aus einem Element. Dieses bekommt die Bilder als Hintergrund.

 
HTML
1
<p id="imageline"></p>

Dieses Element bekommt die ID imageline, damit das JavaScript das Element findet.

Das JavaScript

Bild zu Bildershow: Langsames ein- und Ausblenden von Bildern
Bild zu Bildershow: Langsames ein- und Ausblenden von Bildern
Bild zu Bildershow: Langsames ein- und Ausblenden von Bildern
Bild zu Bildershow: Langsames ein- und Ausblenden von Bildern

Mit einem kleinen Umbau geht das natürlich auch mit Texten usw. Die Idee für die Bilder fand ich allerdings am Besten.

 
JavaScript
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<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>
Über den Autor: Benutzer gelöscht
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten