none
Bilder über Javascript ein- und ausblenden

    Frage

  • Hallo in die Runde,

    bin langsam am verzweifeln.

    Möchte zeitgesteuert mittels setTimeout die Transparenz allmählich erhöhen bzw. erniedrigen zur Realisierung einer Bilder-Show, lasse zur Kontrolle die Variablen anzeigen und muss dabei feststellen, dass im Verlaufe die Abarbeitung merkwürdiges Verhalten zeigt.

    Gewollt ist:

    1. Bild Abnahme der Transparenz bis vollständige Darstellung, Verharren, Zunahme der Transparenz bis Verschwinden, Bildwechsel und selbe Zyklus.

    Wäre schön, wenn jemand mal draufschaut.

    Gruß Tom

    Zum Testen:

    Testseite

    Hier der Code:

    <script type="text/javascript"> var zaehler = 1; //Bildnr. var vorz = 1; //positiv abnehmende Transparenz, negativ zunehmend function fade(step) { test.firstChild.nodeValue = "Bild: " + zaehler + ", % Transparenz: " + step + ", vorz: " + vorz; img.style.opacity = step / 100; img.style.filter = "alpha(opacity=" + step + ")"; // if (vorz == 1) step = step + 20; if (vorz == -1) step = step - 20; if (step < 0) { zaehler++; if (zaehler > 2) zaehler = 1; window.setTimeout(function () {slider(); }, 1000); } if (step == 100) { vorz = -1; window.setTimeout(function () { fade(step); }, 10000); } window.setTimeout(function () { fade(step); }, 5000); } function slider() { img.src = "images/b" + zaehler + ".jpg"; vorz = 1; fade(0); }

    Donnerstag, 20. Februar 2014 15:42

Antworten

  • Hallo Tom,

    warum das Leben so schwer machen?

      jQuery.fadeToggle

    Kompatibel mit allen gängigen Browsern, mach genau das, was Du willst und ist millionenfach im Einsatz.

    Als Alternative schau dir mal:

      http://jquery.malsup.com/cycle2/demo/

    an. Damit kannst Du sehr einfach tolle Slideshows bauen.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community


    • Bearbeitet Stefan FalzMVP Donnerstag, 20. Februar 2014 16:14
    • Als Antwort markiert tom krist Freitag, 21. Februar 2014 08:24
    Donnerstag, 20. Februar 2014 16:12
  • Hallo Tom,

    soweit ich das sehe, werden die Bilder von Cycle2 mit z-index: 100 ausgegeben. Erhöh doch einfach deine z-index Angaben auf mind. 101, dann sollte es auch gehen.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    • Als Antwort markiert tom krist Freitag, 21. Februar 2014 08:24
    Donnerstag, 20. Februar 2014 19:30
  • Hallo Tom,

    das hier wäre mal die Umstellung deiner Datei, so dass sie das macht, was Du eigentlich wolltest (nur ein wenig schneller^^)

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="windows-1252">
    <meta http-equiv="expires" content="0">
    <style>
        
    body {font-size:25px; background-color:#333333; color:white;}
    </style>
    <script type="text/javascript">
        var zaehler = 1; //Bildnr.
        var vorz = 1; //positiv abnehmende Transparenz, negativ zunehmend 
            function fade(step) {
                test.firstChild.nodeValue = "Bild: " + zaehler + ", % Transparenz: " + step + ", vorz: " + vorz;
    
                img.style.opacity = step / 100;
                img.style.filter = "alpha(opacity=" + step + ")"; // 
    
                if ( vorz == 1 )
                    step += 20;
    
                if ( vorz == -1 )
                    step -= 20;
    
                if ( step <= 0 ) {
                    zaehler++;
                    if (zaehler > 2)
                        zaehler = 1;
                    changeImage();
                    vorz = 1;
                }
                if ( step == 100 ) {
                    vorz = -1;
                }
    
                window.setTimeout( function() { fade( step ); }, 250);
            }
            function slider() {
                img.src = "http://www.easyo.de/images/b" + zaehler + ".jpg";
                vorz = 1;
                fade( 0 );
            }
    
            function changeImage() {
                img.src = "http://www.easyo.de/images/b" + zaehler + ".jpg";
            }
            //Slider Ende
        </script>
    </head>
    <body onload="slider();">
    <!-- Anfang Seite -->
    <br />
    <div style="; left:50%; margin-left:-404px; width:808px;background-color:white;">
        <div style="text-align:center; background-color:#333333; border:none;">
            <h2 id="test" style="color:white;">test</h2>
            <div style="width:808px; height:358px; border:solid 4px white; box-sizing:border-box;" >
            <img id="img" alt="" src="http://www.easyo.de/images/b1.JPG" style="width:800px; height:350px; border:none;" /><br /><br />
            </div>
            <br />
        </div>
    </div>
    </body>
    </html>
    

    Das Problem bei deinem Code war/ist, dass Du x verschiedene Timeouts erstellst, die laufen dann nachher alle parallel und kommen sich in die Quere.

    Du brauchst aber nur ein Timeout, daher hab ich das mal umgestellt.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    • Als Antwort markiert tom krist Freitag, 21. Februar 2014 08:24
    Donnerstag, 20. Februar 2014 20:07

Alle Antworten

  • Hallo Tom,

    warum das Leben so schwer machen?

      jQuery.fadeToggle

    Kompatibel mit allen gängigen Browsern, mach genau das, was Du willst und ist millionenfach im Einsatz.

    Als Alternative schau dir mal:

      http://jquery.malsup.com/cycle2/demo/

    an. Damit kannst Du sehr einfach tolle Slideshows bauen.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community


    • Bearbeitet Stefan FalzMVP Donnerstag, 20. Februar 2014 16:14
    • Als Antwort markiert tom krist Freitag, 21. Februar 2014 08:24
    Donnerstag, 20. Februar 2014 16:12
  • Hallo Stefan,

    ich habs mit der Alternative probiert, klappte auf Anhieb, danke für den Tip.

    Mich wurmt aber dennoch, dass ich nicht die Ursache des Fehlverhaltens meines Scripts gefunden habe. Kann ich vielleicht Deinen Ehrgeiz befeuern?

    Gruß Tom

    Donnerstag, 20. Februar 2014 17:42
  • Ein Problem gibt's doch mit cycle2: die Bildershow überlagert andere Elemente. ich habe vergeben z-index von 97 bis 101. Die Elemente 97 und 98 werden von den Grafiken überlagert, die weiteren nicht?!
    Donnerstag, 20. Februar 2014 18:18
  • Hallo Tom,

    soweit ich das sehe, werden die Bilder von Cycle2 mit z-index: 100 ausgegeben. Erhöh doch einfach deine z-index Angaben auf mind. 101, dann sollte es auch gehen.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    • Als Antwort markiert tom krist Freitag, 21. Februar 2014 08:24
    Donnerstag, 20. Februar 2014 19:30
  • Hallo Tom,

    Mich wurmt aber dennoch, dass ich nicht die Ursache des Fehlverhaltens meines Scripts gefunden habe. Kann ich vielleicht Deinen Ehrgeiz befeuern?

    poste doch bitte ein vollständiges Beispiel (noch besser wäre es, wenn Du ein Beispiel inkl. HTML und JavaScript Code online als Demo bereitstellen könntest). Dann schau ich mir das auch gerne mal an.

    Eine Beschreibung, was genau nun nicht funktioniert, wäre auch sehr hilfreich. Denn "merkwürdiges Verhalten" kann ja alles und nichts sein.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Donnerstag, 20. Februar 2014 19:31
  • Eine Testseite findest Du im Eingangs-Posting oder unter www.easyo.de/test.htm.

    Was passiert: Das erste Bild wird richtig ein- und dann ausgeblendet. Dann aber flattert die Grafik (möglicherweise klappt auch der Wechsel auf Bild 2 nicht) und die Variablen, Ausgabe über der Grafik, fangen "unkontrolliert" an zu springen, auch die Zeitintervalle scheinen mir nicht ordnungsgemäß abzulaufen.

    Ich probiere derweil mit einer Umstellung der z-Indexe.

    Tom

    Donnerstag, 20. Februar 2014 19:48
  • Eine Testseite findest Du im Eingangs-Posting oder unter www.easyo.de/test.htm.

    Stimmt. Sorry, hatte ich irgendwie übersehen.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Donnerstag, 20. Februar 2014 19:51
  • Hallo Tom,

    das hier wäre mal die Umstellung deiner Datei, so dass sie das macht, was Du eigentlich wolltest (nur ein wenig schneller^^)

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="windows-1252">
    <meta http-equiv="expires" content="0">
    <style>
        
    body {font-size:25px; background-color:#333333; color:white;}
    </style>
    <script type="text/javascript">
        var zaehler = 1; //Bildnr.
        var vorz = 1; //positiv abnehmende Transparenz, negativ zunehmend 
            function fade(step) {
                test.firstChild.nodeValue = "Bild: " + zaehler + ", % Transparenz: " + step + ", vorz: " + vorz;
    
                img.style.opacity = step / 100;
                img.style.filter = "alpha(opacity=" + step + ")"; // 
    
                if ( vorz == 1 )
                    step += 20;
    
                if ( vorz == -1 )
                    step -= 20;
    
                if ( step <= 0 ) {
                    zaehler++;
                    if (zaehler > 2)
                        zaehler = 1;
                    changeImage();
                    vorz = 1;
                }
                if ( step == 100 ) {
                    vorz = -1;
                }
    
                window.setTimeout( function() { fade( step ); }, 250);
            }
            function slider() {
                img.src = "http://www.easyo.de/images/b" + zaehler + ".jpg";
                vorz = 1;
                fade( 0 );
            }
    
            function changeImage() {
                img.src = "http://www.easyo.de/images/b" + zaehler + ".jpg";
            }
            //Slider Ende
        </script>
    </head>
    <body onload="slider();">
    <!-- Anfang Seite -->
    <br />
    <div style="; left:50%; margin-left:-404px; width:808px;background-color:white;">
        <div style="text-align:center; background-color:#333333; border:none;">
            <h2 id="test" style="color:white;">test</h2>
            <div style="width:808px; height:358px; border:solid 4px white; box-sizing:border-box;" >
            <img id="img" alt="" src="http://www.easyo.de/images/b1.JPG" style="width:800px; height:350px; border:none;" /><br /><br />
            </div>
            <br />
        </div>
    </div>
    </body>
    </html>
    

    Das Problem bei deinem Code war/ist, dass Du x verschiedene Timeouts erstellst, die laufen dann nachher alle parallel und kommen sich in die Quere.

    Du brauchst aber nur ein Timeout, daher hab ich das mal umgestellt.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    • Als Antwort markiert tom krist Freitag, 21. Februar 2014 08:24
    Donnerstag, 20. Februar 2014 20:07
  • Hab verstanden.

    Der letzte Timeout war also das Problem, der Aufruf eingeschränkt auf step>=0 && step<100, brachte auch Erfolg.  Danke Dir, einen schönen Abend.

    Gruß Tom

     

    Donnerstag, 20. Februar 2014 20:44
  • Hallo Tom,

    wenn Du die Beiträge noch bewerten und "als Antwort markieren" könntest, wäre das prima.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    • Als Antwort markiert tom krist Freitag, 21. Februar 2014 07:35
    • Tag als Antwort aufgehoben tom krist Freitag, 21. Februar 2014 08:24
    Donnerstag, 20. Februar 2014 20:52
  • Sorry, ist jetzt erledigt.

    Danke nochmal für die schnelle Unterstützung.

    Tom

    Freitag, 21. Februar 2014 07:39
  • Hallo Tom,

    kein Problem.

    Die Funktion "als Antwort markieren" dient dazu, anderen Usern, die auf diesen Thread stoßen, das Posting direkt hervorzuheben, dass am hilfreichsten war bzw. die Antwort auf die gestellte Frage beinhaltet. In deinem Fall wäre das ja nicht mein Posting, in dem ich um die Bewertung gebeten habe, sondern bspw. eher meine erste Antwort mit dem Hinweis auf jQuery.fadeToggle und/oder das Posting, in dem ich deinen Code korrigiert hatte.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Freitag, 21. Februar 2014 07:45
  • Kann man noch korrigieren?
    Freitag, 21. Februar 2014 08:07
  • Kann man noch korrigieren?

    Klar. Warum nicht?


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Freitag, 21. Februar 2014 08:13
  • Wer lesen kann, ist klar im Vorteil. Nur ich habs nicht so mit dem Kleingedruckten.

    Nun sollte es passen.

    Bis zum nächsten Mal, Gruß Tom

    Freitag, 21. Februar 2014 08:27