Webseiten Hintergrundbild austauschen

Neuling09

Neuling09

Grünschnabel
Hallo zusammen,

ich bin zwar in Sachen HTML & CSS recht fit, allerdings habe ich von JavaScript noch nicht so den Plan!

Mein Vorhaben.
Ich möchte eine Webseite erstellen, bei der die Hintergrundbilder alle 10 Sekunden wechseln. Ich habe insgesamt 6 Bilder. Die Bilder sollen die grösse der ganzen Webseite haben und es müsste möglich sein, 1-2 div's über die ganze Geschichte zu legen.

Ich habe hier mal eine Beispielseite für Euch: http://easybistro.com/

Gibt es da vielleicht fertige Scripts die man einbauen kann oder hat jemande andere Tipps? Über Hilfe wäre ich mehr als dankbar!
 
Nun ja. Die Bilder haben 1500 x 1100 Pixel als Abmaße. Ich wollte sie über CSS zentriert positionieren. Im Endeffekt kommen die Bilder in einen div Container rein. Die Bilder sollen dann einfach wechseln, wie in der Beispielseite.
 
Soetwas geht mit Javascript:
Code: 
<script type="text/javascript">
<!--
var bg=[
        'pfad/zu/bild1.jpg',
        'pfad/zu/bild2.jpg',
        'pfad/zu/bild3.jpg'
       ];

window.setInterval(
                  function()
                  {
                    img=bg.shift();bg.push(img);
                    document.getElementsByTagName('body')[0].style.backgroundImage
                      ='url('+img+')';
                  },
                  10000);
                  
//-->
</script>

bei bg gibst du die Pfade zu den Bildern an. Die 10000 ist der Millisekunden-Wert für den Interval. Das tauscht das Hintergrundbild im <body> aus.
Wenn es stattdessen ein anderes Element sein soll musst du statt:
Code: 
 document.getElementsByTagName('body')[0]
einen Zeiger auf das gewünschte Objekt notieren, bspw. per getElementById.

Die sonstige Formatierung kannst du per CSS vornehmen:
Code: 
background-position:center;
  background-repeat: no-repeat;
 
Das sieht wirklich verdammt schick aus!

Gibt es jetzt vielleicht noch die Möglichkeit die Bilder nicht so apruppt wechseln zu lassen, sprich mit einem 'Fade Effekt' zu verschönern?
 
Hi,

mit Suchbegriffen wie "Fade", "FadeIn", oder "Fade-Effekt" lassen sich hier im JS-Forum diverse Script-Beispiele aufstöbern.

Oder du schaust dir beispielsweise die "Fading"-Effects des JS-Frameworks jQuery an.

mfg Maik
 
Hallo,

ich verwende das oben angefuehrte skript. funktioniert!

Kann ich es dahingehend modifizieren, dass das Hintergrundbild zentriert und "ungekachelt" gezeigt wird?

Ich habe versucht:

='url('+img+') no-repeat';

Geht leider nicht.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück