Diashow im Hintergrund

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Diashow im Hintergrund

    Hallo!

    Würde gerne auf einer html-Seite im Hintergrund eine Diashow von ca. 5 Bildern haben. Leider habe ich null Ahnung wie man sowas anstellt. Mit folgendem Code (jedenfalls nem Teil davon^^) kann man den Hintergrund ändern.

    Nun meine Frage: Ist das mit der Diashow möglich? :(


    Quellcode

    1. <style type="text/css">
    2. body {
    3. background-color:#000000;
    4. background-image:url(
    5. );
    6. background-attachment: fixed;
    7. background-position:top right;
    8. background-repeat:no-repeat;
    9. } :
    10. div#header h1{height:69px; margin:0; padding: 0px; width: 681px; background: url( )no-repeat;}
    11. .br3 {background: none;}
    12. .tl3 {background: none;}
    13. .tr3 {background: none;}
    14. .bl3 {background: none;}
    15. .profil_left .profil_top {background: none;}
    16. .profil_top { margin:0; display: block; width:100%; background: none; color: #ffffff; font-size: 10pt; font-weight: bold; }
    17. .profil_content { overflow: hidden; padding: 5px; }
    18. .profil { width:400px; background: none; margin-bottom: 5px; margin-top: 15px; text-align: center; }
    19. .profil_left { width:260px; background: none; margin-bottom: 5px; margin-top: 15px; text-align: left; } #last_votes, #last_visits { text-align: center; }
    20. .profil_border { width:250px; background: none; border: 0px solid #FF9933; margin-bottom: 5px; margin-top: 15px; text-align: left; }
    21. body {
    22. background-color:#000000;
    23. background-image:url( [B]LINK_ZUM_BILD[/B] );
    24. background-attachment: fixed;
    25. background-position:top middle;
    26. background-repeat:no-repeat;
    27. }
    28. </style>
    Alles anzeigen


    Wie müsste ich den Code ändern?
    Hoffe, dass mir jemand helfen kann...:p

    mfg killer_duck99
  • Im Grunde brauchst Du ein JavScript-Array mit den Pfaden zu den Bildern. Dann brauchst Du einen Interval... in etwa so:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title></title>
    4. <script type="text/javascript">
    5. var aktuelles_bild = 0;
    6. function Hintergrundwechsel() {
    7. var bilder = new Array( '/bilder/bild1.jpg', '/bilder/bild2.jpg' );
    8. if(aktuelles_bild == (bilder.length - 1)) {
    9. aktuelles_bild = 0;
    10. } else {
    11. aktuelles_bild++;
    12. }
    13. document.body.style.backgroundImage = 'url('+bilder[aktuelles_bild]+');';
    14. }
    15. </script>
    16. </head>
    17. <body onload="window.setInterval('Hintergrundwechsel()', 1000);">
    18. Deine sonstigen Inhalte
    19. </body>
    20. </html>
    Alles anzeigen


    In die Zeile

    Quellcode

    1. var bilder = new Array( '/bilder/bild1.jpg', '/bilder/bild2.jpg' );

    trägst du deine Bilder ein, immer den Pfad von deiner Seite aus. Das Script da oben kannst Du mit beliebig vielen Bilder füttern, nur immer drauf achten ein Komma zwischen die einzelnen Einträge zu setzen!
    Hier ein Beispiel für 6 Bilder:

    Quellcode

    1. var bilder = new Array( '/bilder/bild1.jpg', '/bilder/bild2.jpg', '/bilder/bild3.jpg', '/bilder/bild4.jpg', '/bilder/bild5.jpg', '/bilder/bild6.jpg' );

    Den Abstand (=Interval) zwischen Bildänderungen kannst Du in der Zeile ändern:

    Quellcode

    1. <body onload="window.setInterval('Hintergrundwechsel()', [B]1000[/B]);">

    In diesem Beispiel wechselt das Bild alle 1000 Millisekunden, also jede Sekunde.


    HTH :)
  • Hi,

    mich würde interessieren was für ein Umfeld das ist, dass Du kein JS benutzen darfst. Fast jede halbwegs aktuelle Seite benutzt eine Scriptsprache wie JavaScript, um die Inhalte dynamisch zu machen...

    Mit reinem HTML bleibt eigentlich nur die Möglichkeit, für jedes Bild eine eigene Seite zu machen, uU auch in einem iframe. Aber da gehts dann halt nicht automatisch...
    ... lg!