Bilder durch "Weiter-Button" wechseln?

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

    • Bilder durch "Weiter-Button" wechseln?

      Hallo,

      bevor ich probiere alles mit Worten zu erklären, habe ich erstmal ein Bild für euch:



      Wie man vielleicht auf dem Bild erkennen kann, habe ich dort 3 unterschiedliche Bilder (die Pinken), diese möchte ich irgendwie durch sogenannte "Weiter-Button" wechseln lassen! Wenn ich also z.B. auf den mittleren Pfeil nach rechts klicke, dann soll sich nur das mittlere Bild ändern!

      Kennt jemand zufällig eine Möglichkeit, mit der ich dies realisieren kann?

      Mfg, fallindown


      Edit: Falls es irgendwie von Bedeutung ist, ich habe vor das ganze in Joomla einzubinden!

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • Jok3r;134835 schrieb:

      Flash wäre darin die bessere variante denke ich für mich persönlich


      Nö, der einzige Vorteil den Flash hätte das die User die JS dekativiert haben die
      Slideshow sehen können. Allerdings gibt es etwa soviele Leute im Netzt die JS
      deaktiviert haben wie die die keinen Flashplayer installiert haben.

      Ist eigentlich ganz einfach, du erstellst dir eine Variable die deine Momentane Position
      festleggst. Erzeugst ein Array das die Bilder beinhaltet und lässt dan einfach mit
      einem Klick auf einen Button das Bild wechseln. Ich schreib dir hier mal ein kleines
      Beispiel auf. Achtung, dürfte nicht funktionstüchtig sein ist wiegesagt nur ein Beispiel!!

      Quellcode

      1. var Pictures = new Array('1.jpeg', '2.jpeg', '3.jpeg', '4.jpeg');
      2. var CurrPicture = 0;
      3. function slide()
      4. {
      5. var imgcontainer = document.getElementByid('ImageContainer');
      6. var PictureCount = Pictures.length - 1;
      7. if (CurrPicture > PictureCount)
      8. {
      9. CurrPicture = 0;
      10. }
      11. imgcontainer.src = Pictures[CurrPicture];
      12. CurrPicture++;
      13. }
      Alles anzeigen

    • Warum macht ihr euch das eigentlich immer so schwer. Jemand der noch nie mit Javascript gearbeitet hat wird mit deinem Code probleme haben. Weil es steht net wie man es startet oder wo man es einbauen soll :D

      Also ich empfehle dafür jQuery zu nutzen. Ist im endeffekt das gleiche aber es ist bei weitem Benutzerfreundlicher.

      Erklärung + Tutorial auf English
      Live Demo


      Wenn du Fragen dazu hast dann schreib hier einfach.

    • fallindown;134972 schrieb:

      @ulle:

      Danke dir für den Link, die Seite ist echt super und das ist genau das, was ich haben möchte!

      Ich bin nun soweit: *Klick*

      Nur ich muss zugeben, ich weiß nicht, wie ich jetzt noch ein Bild genau darunter bekommen soll! ;-) Vielleicht kannst du mir dabei helfen!

      Mfg, fallindown

      Versuch einfach mal den gleichen Code bloß dann halt ne 2 hinter :D

    • despiteous;134977 schrieb:

      Versuch einfach mal den gleichen Code bloß dann halt ne 2 hinter :D


      Genau das habe ich versucht und folgendes kommt dabei raus: *Klick*

      Weiß zufällig jemand wo der Fehler liegt?

      Mfg, fallindown


      Edit: Ich hab jetzt nochmal intensiv gegoogled und dabei genau das gefunden, was ich gesucht habe: *Klick*

      Ich hab jetzt erstmal was zu tun, aber wenn ich später noch dazu komme, werde ich es mal ausprobieren!


      Edit2: Ich habs jetzt komplett hinbekommen, war mit diesem Script garnicht mal schwer! *Klick*

    • Sag ich doch :D

      Ich weiß schließlich wovon ich rede. ;)

      Wenn du noch andere Sachen brauchst sag bescheid.

      Edit: Jetzt hab ich erstmal gesehen das du ja net das nutzt was ich geschrieben habe, aber auf ein anderes jQuery Tool zurückgegriffen hast.

      Macht ja nix dann hatte ich wenigstens zu 50% recht :D