[JavaScript] Frage bzgl. Bildershow

Dieses Thema im Forum "Webentwicklung" wurde erstellt von bigD, 8. Juli 2009 .

Schlagworte:
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 8. Juli 2009
    Frage bzgl. Bildershow

    Hallo,

    hab zufällig durch stumble http://www.fluxbrigade.com gefunden.
    Mir gefällt das mit dem Übergang recht gut und dass der Text oben da auch gleich mit wechselt.
    Ich hab rausgefunden dass das mit scriptaculous gemacht wird aber ich raff es nicht wie man dann das mit den bildern hinbekommt. Kann mir da jmd. helfen?

    bigD
     

  2. Anzeige
    Dealz: stark reduzierte Angebote finden.
  3. #2 8. Juli 2009
  4. #3 8. Juli 2009
    AW: Frage bzgl. Bildershow

    Soweit war ich auch schon. Aber wie bekomm ich das hin dass der dann das andere Bild faden tut?
     
  5. #4 9. Juli 2009
    AW: Frage bzgl. Bildershow

    du hast ein div container indem deine bilder und texte stehen.
    einfach diesen container faden und alles was drin ist wird ein- ausgeblendet ;)
     
  6. #5 9. Juli 2009
    AW: Frage bzgl. Bildershow

    Ne das weiß ich auch...es geht mir nur darum dass er das eine bild ausfadet und gleichzeitig dass andere einfadet!
     
  7. #6 10. Juli 2009
    AW: Frage bzgl. Bildershow

    1. du definierst ein element#1 mit nem bild als hintergrund
    2. dannach lädst du das andere bild vor (= element#2), positionierst es über element#1 * und stellst in nem interval langsam den opacity-wert höher bis er auf 1 (bzw. 100%) steht
    3. anschließend setzt du das bild als neuen hintergrund in element#1 und entfernst element#2

    wenn du weitere bilder einfaden lassen willst, beginnst du einfach bei schritt no. 2

    * entweder via javascript, oder direkt mit css
     
  8. #7 10. Juli 2009
    AW: Frage bzgl. Bildershow

    Kannst du mir 2. und 3. genauer erklären?!^^
    Wie macht man das (also so is das auf der Seite) dass der immer den css-befehl visible:none verschiebt, also von bild zu bild bzw. div zu div?

    Das brauch ich dann bekomm ich das hin denke ich...
     
  9. #8 11. Juli 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Frage bzgl. Bildershow

    No File | xup.in

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
     <head>
     <title>Fade IN/OUT</title>
     <style type="text/css">
     #fadeElement {
     width: 435px;
     height: 326px;
     background-image: url('bild1.png');
     }
     
     #fadeOverlay {
     position: relative;
     top: 0;
     left: 0;
     width: 500px;
     height: 250px;
     }
     
     #fadeElement, #fadeOverlay {
     background-position: top left;
     background-repeat: no-repeat;
     } 
     </style>
     <script type="text/javascript">
     // <![CDATA[
     var images = ["bild2.png", "bild3.png", "bild1.png"];
     var pointer = -1, element = overlay = null;
     function startFade() {
     var element = window.element || (window.element = document.getElementById("fadeElement"));
     var overlay = window.overlay || (window.overlay = document.getElementById("fadeOverlay"));
     var images = window.images;
     var pointer = window.pointer;
     if(++pointer >= images.length)
     pointer = 0;
     
     window.pointer = pointer;
     var img = document.createElement('img');
     img.style.cssText = 'margin:0;padding:0;';
     img.alt = 'bild nicht gefunden!';
     img.src = images[pointer];
     setOpacity(img, (opacity = 0));
     overlay.appendChild(img);
     
     var i = window.setInterval(function() {
     if((opacity += 0.1) >= 1) {
     window.clearInterval(i);
     element.style.backgroundImage = 'url(' + images[pointer] + ')';
     window.setTimeout(function() {
     overlay.removeChild(img);
     window.setTimeout(startFade, 2250);
     }, 250);
     
     return;
     }
     
     setOpacity(img, opacity);
     }, 60);
     }
     
     var IS_IE = !!(window.attachEvent && !window.opera);
     var IS_IE8 = (IS_IE && navigator.userAgent.indexOf('MSIE 8') > -1);
     function setOpacity(el, o) {
     if(IS_IE) {
     // die IE8 und IE regel sollten zusammen gesetzt werden
     if(IS_IE8) el.style["-ms-filter"] = '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (o * 100) + ')";';
     el.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (o * 100) + ')';
     } else el.style.opacity = o;
     }
     
     function fadeTimer() { window.setTimeout(startFade, 2500); };
     if(IS_IE) window.attachEvent('onload', fadeTimer, false);
     else window.addEventListener('load', fadeTimer, false);
     // ]]>
     </script>
     </head>
     <body>
     <div id="fadeElement">
     <div id="fadeOverlay"></div>
     </div>
     </body>
    </html>
     

  10. Videos zum Thema
Die Seite wird geladen...
Similar Threads - JavaScript Frage bzgl
  1. Antworten:
    2
    Aufrufe:
    626
  2. Antworten:
    3
    Aufrufe:
    389
  3. Antworten:
    2
    Aufrufe:
    377
  4. Antworten:
    4
    Aufrufe:
    394
  5. [JavaScript] Anfängerfrage?!

    bigD , 5. April 2010 , im Forum: Webentwicklung
    Antworten:
    13
    Aufrufe:
    602
  • Annonce

  • Annonce