Slideshow in javascript

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

  • Slideshow in javascript

    Hallo,

    Ich versuch mich grade an einer Slideshow in Javascript und hab ein paar Probleme.
    Er zeigt mir die Bilder nicht an. Nun weis ich nicht ob der Fehler in der Anzeige steckt oder ob sogar meine kompletten Überlegung falsch ist.

    Hier mal der Code:



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Slideshow</title>
    <script>
    <!--Array für Bilder

    Pictures = new array('<img src="bsp01.jpg">','<img src="bsp02.jpg">','<img src="bsp03.jpg">');

    var NumberOfPics=Pictures.length;
    var counter=0;
    var CurrentPic=0;

    //Bildwechsel

    function Start()
    {
    element=document.getElementById("slide");
    element.innerHTML=Pictures[CurrentPic};
    CurrentPic++;
    if(CurrentPic < NumberOfPics)
    {

    }
    else
    {
    CurrentPic=0;
    }

    window.setTimeout("Start()", 5000);

    }

    -->
    </script>
    </head>
    <body onload="Start()">

    <span id="slide"></span>

    </body>
    </html>
    Ich hoffe ihr könnt mir helfen, aber bitte keine Lösung, nur Hinweise... ich möchte da selber, auf die Lösung, kommen.


    Gruß Nobody
    "Irren ist menschlich. Aber wer richtigen Mist bauen will, braucht einen Computer."

  • Ein paar Fehler sind mir auch gestern aufgefallen nachdem ich hier gepostet hab :P
    Nun funktioniert es, doch leider hab ich mich zu früh gefreut, denn er wechselt erst nach jedem neuladen der Seite das Bild.

    Wie bekomme ich es hin, das es auch ohne Neuladen der Seite ein Bildwechsel stattfindet?
    "Irren ist menschlich. Aber wer richtigen Mist bauen will, braucht einen Computer."

  • Sry, hab vorhin vergessen nochmal den überarbeiteten Code mit zu posten.

    function Start()
    {
    var Pictures = new Array('','','');
    var CurrentPic=0;

    Slide(CurrentPic, Pictures);

    }

    //Bildwechsel

    function Slide(CurrentPic, Pictures)
    {
    var NumberOfPics=Pictures.length;

    element=document.getElementById("slide");
    element.innerHTML=Pictures[CurrentPic];
    CurrentPic++;

    if(CurrentPic < NumberOfPics)
    {

    }

    else
    {
    CurrentPic=0;
    }
    window.setTimeout(Slide(CurrentPic, Pictures),7000);

    }

    So funktioniert es nur nach jedem Neuladen der Seite.
    Es hängt glaub ich nicht mit setTimeout zusammen. Er ruft ja die Funktion Slide alle 7Sek auf. Das merk ich daran das wenn beim Neuladen der Seite
    Die nicht alle Bilder in der Reihenfolge angezeigt werden, sondern das er welche überspringt, je nachdem wie lang man mit dem Neuladen warten.
    Ich glaub eher es hängt irgendwo hier:
    element.innerHTML=Pictures[CurrentPic];

    hmmm
    "Irren ist menschlich. Aber wer richtigen Mist bauen will, braucht einen Computer."

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von nobody special ()

  • Mal ne Frage, was willst du mit folgendem erreichen?

    Quellcode

    1. if(CurrentPic < NumberOfPics)
    2. {
    3. // ?!?!?!
    4. }
    6. else
    7. {
    8. CurrentPic=0;
    9. }


    Poste den Code ggf. mal im CODE-Tag, falls das Forum hier was verschlingt.

    .. Und gibt es diesen Satz von dir auch in deutscher Version?

    Das merk ich daran das wenn beim Neuladen der Seite
    Die nicht alle Bilder in der Reihenfolge angezeigt werden, sondern das er welche überspringt, je nachdem wie lang man mit dem Neuladen warten.


    Aber nun zu deinem Problem:
    Der Fehler liegt in dem setTimeout: Du hast den Namen der aufzurufenden Funktion nicht in Anführungszeichen, sprich es wird alle 7 Sekunden versucht eine Funktion aufzurufen, die den Rückgabewert von Slide() hat - 0.
    Jan Thurau
    Software and Systems Engineer
    janthurau.de

    [Blockierte Grafik: http://www.pageheroes.com/media/image/pageheroes_logo.png] - We get your page working!

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Jan Thurau ()

  • Sorry für mein grobes Deutsch, aber nach mehrfachen bearbeiten, ging anscheinend meine Konzentration flöten^^

    Ich habe versucht mit dem Code-Tag zu arbeiten, doch er hat mein Quellcode dann immer umgewandelt und nur ein Teil davon gepostet.

    Die Verzweigung war noch ein Überbleibsel, einer vorherigen Version. Änder ich aber noch ab :)

    Ich hab probiert die Slide-Funktion in der setTimeout in Anführungsstriche zusetzen, doch dann wechselt er das Bild, selbst beim Neuladen der Seite nicht mehr.
    Könnte das daran liegen, dass er den inkrementierten Wert von CurrentPic aus der Funktion nicht übernimmt und den Wert aus dem Funktionsaufruf von Start() nimmt?
    "Irren ist menschlich. Aber wer richtigen Mist bauen will, braucht einen Computer."

  • Hast du die Namen der Variablen auch als Namen überlegen, oder den Wert der Variablen?

    Poste doch nochmal deinen jetzigen Code im CODE-Tag. Um deine Frage zu beantworten, teste es doch einfach. Packe ein alert(CurrentPic); in die Funktion und schau, was ausgegeben wird ;)
    Jan Thurau
    Software and Systems Engineer
    janthurau.de

    [Blockierte Grafik: http://www.pageheroes.com/media/image/pageheroes_logo.png] - We get your page working!

  • Nicht mehr nötig, es funktioniert jetzt. Problem lag beim setTimeout, das hat Probleme mit Parametern und
    da muss halt bissel gefummelt werden :)

    Hier nochmal der Code

    HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Slideshow</title><script><!--Array für Bilder
    3. function Start(){ var Pictures = new Array('<img src="bsp01.jpg">','<img src="bsp02.jpg">','<img src="bsp03.jpg">'); var CurrentPic=0; var NumberOfPics=Pictures.length; Slide(CurrentPic, Pictures, NumberOfPics);}
    4. //Bildwechsel
    5. function Slide(CurrentPic, Pictures, NumberOfPics){ element=document.getElementById("slide"); element.innerHTML=Pictures[CurrentPic]; CurrentPic++; if(CurrentPic == NumberOfPics) { CurrentPic=0; }
    6. /* *setTimeout mit, Parametern über Closures */ window.setTimeout(function () {Slide(CurrentPic,Pictures,NumberOfPics)},3000); }
    8. --></script></head><body onload="Start()">
    9. <span id="slide"></span>
    10. </body></html>



    Somit wäre das erste Problem gelöst. Stellt sich nur die Frage wie man so halbwegs vernünftig Übergangseffekte hin bekommt.
    Momentan sieht es ja noch relativ unschön aus beim Bildwechsel.
    "Irren ist menschlich. Aber wer richtigen Mist bauen will, braucht einen Computer."

  • Geht u.A. mit CSS (opacity) und ner Javascript Schleife - halt die Opacity solange verringern, bis sie 0 ist. Dann das neue Bild setzen, und wieder hochdrehen. Oder ne Div um das Bild mit festen Maßen und overflow: hidden, und dann das Bild nach links/rechts schieben bis es verschwunden ist, und das neue genauso reinschieben.
    Jan Thurau
    Software and Systems Engineer
    janthurau.de

    [Blockierte Grafik: http://www.pageheroes.com/media/image/pageheroes_logo.png] - We get your page working!

  • Da hab ich aber nochmal zwei fragen^^


    Unter Selfhtml CSS Eigenschaften gibt es die Kategorie Filter(nur Microsoft) laufen die nur unter dem IE?
    Ich hab es erstmal mit einem festen Wert probiert, doch da ist keine Verschmelzung mit dem Hintergrund sichtbar.
    Wenn die nur unter IE wäre das ja echt besch...eiden.


    Und mit dem Rein- und Raus-schieben ist mir das etwas unklar wie das funktionieren soll. Ich hab doch nur ein Element
    durch Pictures[CurrentPic] angezeigt. Wenn ich das, nach link raus schiebe, dann dürft doch rechts nur ein weißes "Bild" nachrücken.
    Und sobald mein CurrentPic um 1 hochgezählt ist wird mir dann erst das nächste Bild angezeigt bzw von rechts dann eingerückt werden.

    Muss ich da zwei Bilder gleichzeitig anzeigen lassen: Pictures[CurrentPic] und Pictures[CurrentPic+1] wobei sich Pictures[CurrentPic+1] noch außerhalb der Sichtbarkeit befindet?




    Und ab diesen Punkt möchte ich dir erstmal für deine bisherige Hilfe bedanken :)
    Gruß Nobody
    "Irren ist menschlich. Aber wer richtigen Mist bauen will, braucht einen Computer."

  • Die Opacity Eigenschaft gibt es seit CSS3, geht also nur in neuen Browsern:
    css3.info/preview/opacity/

    Die Filter-Sachen, die du wohl gefunden hast, gehen tatsächlich nur im IE.

    Zum Rein- und Rausschieben: Da würde tatsächlich erst ein weißer Hintergrund nachgeschoben werden, wenn du das so umsetzen würdest.

    Eventuell könnte man aber eine Container Div mit fester breite + overflow: hidden nehmen, und in die alle Bilder einfach einfügen. Dann würde nur ein Bild sichtbar sein, und du müsstest das sichtbare Bild dann über margin-left-- nach links verschieben.... Ich glaube das wäre die schlauere und einfachere Idee, müsstest du mal probieren
    Jan Thurau
    Software and Systems Engineer
    janthurau.de

    [Blockierte Grafik: http://www.pageheroes.com/media/image/pageheroes_logo.png] - We get your page working!