✔ zufälliger hintergrundbildwechsel(vollbild) mit fade- effekt

J

Jack W

Grünschnabel
Hi alle zusammen!
Ich bin neu hier und möchte mich kurz vorstellen.
Mein Name ist Jack, bin 23 Jahre alt und ich studiere im 7. Semester Online Medien. Gestern habe ich mit der Vorbereitung meiner Thesis begonnen und bin gleich auf ein Problem gestossen, doch dazu etwas später mehr...

Zu meinen Vorkenntnissen:
In der Schule haben wir die Programmiersprachen C++ und Java oberflächlich behandelt, jedoch leider kein Javascript und dieser Umstand bereitet mir Probleme. Ich würde behaupten, ohne arrogant klingen zu wollen, dass ein grundsätzlich Verständnis vorhanden ist d.h. Übergabeparameter, Objektorientierung, Schleifen, if else Abfragen etc.

Meine Thesis:
Sie beinhaltet die Bereiche AV- Produktion, Webtechnologien(HTML 5, CSS3 und Javascript + jQuery) und Marketing d.h. ein Musikstück wird produziert, dazu ein Musikvideo gedreht, eine Homepage(ohne Onlineshop!) erstellt und über Social-Networks Marketing für die Band betrieben.

Mein Ziel:
Eine Website in dieser Art:
http://www.acer.de/ac/de/DE/content/home

So genug über mich ;)

Ich habe folgendes Problem:
Wenn ich folgende Scripts verwende tritt ein Darstellungsfehler auf d.h. die Hintergrundbilder werden NICHT zu 100% auf dem Bildschrim dargestellt (zufälliger HG-Wechsel und Fade-Effekt funktioniert).

HTML-Datei:
Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<script type="text/javascript" src="javascript/bgImg.js"></script>
<script src="javascript/bgImg.js"></script>                <!-- bgImg zuf&auml;lliger Bildwechsel mit fade in -->
<style type="text/css">

* { margin: 0;
    padding: 0;}

/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
            height: 100%;
            overflow: hidden;}

/* BG-Image auf unterste Ebene anordnen */
#bgImg{ position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border: 0;
        z-index: 1;}
/* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
#bodyDiv{ position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          overflow: auto;
          width: 100%;
          height: 100%;
          text-align: center;}
</style>
</head>
<body>
<div id="bgImg">
<div id="bodyDiv">
</div>
</body>
</html>

Javascript-Datei:
Code: 
   function bgImg()
    {
        var checkInterval = null,
            bgImgInterval = null,
            currentImage = -1;
            zufall=0;

        images = new Array
        (
                'pictures/hintergrund.jpg',
                'pictures/a.jpg',
                'pictures/b.jpg'
                // Diese Bilder sind die standard Windows XP Bilder
        );

        loadingImages = new Array();

        this.run = function()
        {
            checkInterval = window.setInterval('this.checkIfLoaded();', 100);
            for(i = 0;i < images.length;i++)
            {
                image = images[i];
                loadingImages.push(new Image);
                loadingImages[i].src = image;
            }
        }

        this.checkIfLoaded = function()
        {
            allLoaded = true;
            for(i = 0;i < loadingImages.length;i++)
            {
                loadingImage = loadingImages[i];
                if(!loadingImage.complete)
                    allLoaded = false;
            }

            if(allLoaded)
            {
                window.clearInterval(checkInterval);
                this.startbgImg();
                window.setInterval('this.startbgImg();', 8000);    // Die Funktion für das Bilder wechseln alle 8 Sekunden ausführen
            }
        }

        this.startbgImg = function()
        {
            this.showImage();
            if(currentImage == (loadingImages.length - 1))
                currentImage = 0;
            else
            {
                 zufall = 0 + 2*(Math.random());                // zufäliger Bildwechsel
                currentImage = Math.round(zufall);
            }

            element = document.getElementById('bgImg');
            element.style.height = loadingImages[currentImage].height + 'px';
            element.style.width = loadingImages[currentImage].width + 'px';
            element.style.backgroundImage = 'url(' + loadingImages[currentImage].src + ')';
            window.setTimeout('this.hideImage();', 7800);    // Das Bild in 7,8 Sekunden ausblenden

        }

        this.hideImage = function()
        {
            element = document.getElementById('bgImg');
            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 * 2);
            // Von 0 bis 100 (Prozent)
            // Das i * 2 dient dazu, dass das Ausblenden nicht zu schnell geht
        }

        this.showImage = function()
        {
            element = document.getElementById('bgImg');
            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 * 2);
        }

        this.run();
    }

    window.onload = function()
    {
        bgImg();
    }
Wo ist der Fehler?
Ich hoffe ihr könnt mir helfen.

Lg Jack
 
Willkommen im Forum.

Bitte benutze für Zukunft die entsprechend Code-Tags, dass kann ja so kein Mensch sinnvoll lesen.

Jetzt zu deinem Problem: Beim drüber scrollen sehe ich die beiden Zeilen:

Javascript: 
element.style.height = loadingImages[currentImage].height + 'px';
element.style.width = loadingImages[currentImage].width + 'px';

Das heißt dein HTML-Img-Element hat immer die gleiche Größe wie die eigentliche Bilddatei. Nimm die Zeilen raus.
 
Danke für deine Antwort.
Dein Vorschlag hat das Problem leider nicht gelöst. Die einzige Änderung ist, dass sich das Bild wiederholt, wenn die Auflösung des Bildes kleiner als die Bildschirmauflösung des Clients ist.
 
Ja, ich hätte sollen etwas besser hingucken :-D. Ich dachte das wäre in Img Element, aber es ist ja ein Hintergrundbild in einem DIV.

Nach den beiden eben genannten Zeilen kommt diese hier

Javascript: 
element.style.backgroundImage = 'url(' + loadingImages[currentImage].src + ')';

Die muss natürlich lauten


Javascript: 
element.src = loadingImages[currentImage].src;

Und entsprechend musst du in deinem HTML eine Zeile ändern.

HTML: 
<!--Vorher-->
<div id="bgImg">

<!--Nachher-->
<img id="bgImg" src="link-zum-start-bild.jpg" />

Hintergrundbilder lassen sich nicht strecken, zumindest nicht im alten Standard. Deshalb musst du dein img-Element nehmen.
 
Ich weiß ja nicht, ob ich auf diesen Uralt-Thread noch eine Antwort erhalte - ich versuche es einfach mal.
Die Funktion gefällt mir sehr gut und ich möchte sie gerne benutzen, mit einigen kleinen Änderungen:
Ich möchte die Bilder nicht als Hintergrund (vollflächig), sondern nur mit einer Größe von X%, und darunter eine Unterzeile mit einer Beschreibung zum Bild.
Außerdem, und das ist viel wichtiger, sollen die Bilder nicht nach Zufall eingefügt werden, sondern in der Reihenfolge des Array "Images".
Das kriege ich einfach nicht hin.
Kann mir jemand ein wenig auf die Sprünge helfen?
Vielen Dank im voraus.
 
Willkommen im Forum!
Dieser Thread ist schon ein wenig alt und heute würde ich empfehlen, das Rad nicht neu zu erfinden sondern eine fertige Slideshow zu verwenden.
Ich dachte erst an Vegas
Vegas Background SlideShow
aber das kann anscheinend nur mit Bildern arbeiten.
Slideshows gibt es jedoch wie Sand am Meer und es ist kein Problem, sie auch für den Hintergrund einzusetzen. Ich empfehle Swiper:
Swiper - The Most Modern Mobile Touch Slider
Versuche es damit und wenn Du nicht zum Ziel kommst, melde dich wieder.
 
Gerne.
Zunächst mal der zufällige Aufruf der Bilder. Das hat nur deshalb nicht auf Anhieb geklappt, weil mein Code Schreibfehler enthielt. Jetzt sieht es wie folgt aus:
----------------------
var anzahl = (loadingImages.length);
if(currentImage == (loadingImages.length - 1))
currentImage = 0;
else
{
// alter Code zufall = 0 + 4*(Math.random()); // zufäliger Bildwechsel
//alter Code currentImage = Math.round(zufall);
//jetzt neuer Code:
currentImage++
if(currentImage > anzahl)
currentImage=0;
}
-------------------
Etwas aufwändiger war die Positionierung der Unterschrift unter das Bild.
Vorweg: die Unterschriften liegen in einer Div im Hauptdokument, die ID tragen die Bezeichnungen "u1", "u2" usw.
Die Größe der Bilder ist unterschiedlich. Die CSS-Eigenschaft der Breite ist mit X% definiert, die Höhe mit "auto"
Damit die Unterschrift immer im gleichen Abstand unter dem Bild erscheint, muss die tatsächliche Höhe des Bildes ins Verhältnis zur Breite ermittelt werden und daraus die Eigenschaft "style.top". Der Code ist wie folgt:
----------------------------------
var ident_name = "u"+currentImage; //ermittelt die ID, wo der Text steht
var text = document.getElementById(ident_name).innerHTML; // holt den Text
var bgImg_breite = document.getElementById('bgImg').offsetWidth; //ermittelt die CSS-Einstellung
var bildbreite = loadingImages[currentImage].width;
var bildhoehe = loadingImages[currentImage].height;
// ermittelt breite und Höhe des geladenen Bildes
var massstab = (bgImg_breite / bildbreite); //ermittelt das Breite-Höhenverhältnis
var pos_unterschrift = (bildhoehe * massstab +20);//berechnet die Position aus bildhoehe und massstab
document.getElementById("unterschrift").style.top = pos_unterschrift + 'px'; //ändert die "style.top" Eigenschaft des DIV "unterschrift"
document.getElementById("unterschrift").innerHTML = text;
//schreibt den Text in das DIV "unterschrift".
-------------------------
Ich weiß, das ist ein wenig "BASIC"-Programmierung (vielleicht gibt es noch jemanden, der wie ich in grauer Vorzeit damit gearbeitet hat) aber es funktioniert und ich bin zufrieden mit dem Ergebnis.

(nur so zum Spaß: ich bin hier zwar als "Grünschnabel" eingruppiert, aber die Milchzähne habe ich schon lange nicht mehr, eher zähle ich als 41er zum alten Eisen, der sich aus Jux und Tollerei (Just for fun) mit HTML, JS, VBA, php und was es sonst noch an neumodischem Zeugs gibt, die Zeit vertreibt)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück