Anzeige

Bilder-Karussell mit JavaScript

Bilder-Karussell mit JavaScript | PSD-Tutorials.de

Erstellt von mike913, 22.04.2013.

  1. mike913

    mike913 Noch nicht viel geschrieben

    Dabei seit:
    09.07.2010
    Beiträge:
    11
    Geschlecht:
    männlich
    Bilder-Karussell mit JavaScript
    Hallo, ins Forum,

    ich möchte ein sogenanntes Bilderkarussell erstellen. Eine Bilderreihe (Bilder sind horizontal angeordnet) soll sich von links nach rechts innerhalb eines Div-Containers aus dem Bild bewegen. Neue Bilder sollen nachrücken.

    Hier ein Link, wie das Ganze konkret aussehen soll.
    http://weider-24.de/Bekleidung/Better-Bodies-Maenner/T-Shirts-Jacken/GRAPHIC-LOGO-TEE::1678.html
    ----Unten im Footer ist das Karussell---

    Das "Bilder-Karussell" soll mit JavaScript umgesetz werden.
    Ich habe bereits ein paar Vorlagen gefunden, diese benötigen alle jQuery.

    Kann man nicht selbst einfach mit ein paar Zeilen Code in JavaScript so ein "Bilder-Karussell" umsetzten?

    Hier mein Grundgerüst...

    HTML
    <div id="container">
    <ul>
    <li><img src="bild1.png" width="100" height="92"></li>
    <li><img src="bild2.png" width="100" height="52"></li>
    <li><img src="bild3.png" width="100" height="108"></li>
    <li><img src="bild4.png" width="100" height="124"></li>
    <li><img src="bild5.png" width="100" height="100"></li>
    </ul>
    </div>

    CSS
    #container{width:900px;
    border-style:solid;
    border-width:1px;
    border-color:#000000;}

    #container ul{list-style-type:none;}

    #container li{display:inline;
    padding-left:20px;}

    Vielleicht kann mir einer helfen, was der nächste Schritt mit JavaScript wäre, um die Bilder in "Bewegung" zu bringen.

    Gruß
     
    #1      
  2. leveler

    leveler 00110100 00110010

    Dabei seit:
    23.06.2008
    Beiträge:
    2.614
    Bilder-Karussell mit JavaScript
    AW: Bilder-Karussell mit JavaScript

    Klar, kann man. Ob das für Dich einfach ist, weiss von uns hier niemand. Guck Dir das bestehende Beispiel halt genau an und bau es nach/ modifiziere es. Die Anleitung liegt ja im Quelltext der Seite vor.
     
    Zuletzt bearbeitet: 22.04.2013
    #2      
  3. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Bilder-Karussell mit JavaScript
    AW: Bilder-Karussell mit JavaScript

    Die Grundidee ist, Eigenschaften zu modifizieren die die Position des Bildes definieren. Machst du das in rascher Folge, "bewegt" sich das Ding. Ausführlicher und mit Beispiel erklärt das SELFHTML hier: http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/animieren.htm

    Die Probleme beginnen dann mit der Browserkompatibilität der eingesetzten Methoden und so weiter. Deshalb ist unter anderem jQuery so beliebt, es verbirgt die Tricks und Kniffe hinter einem schlichten Interface.


    Duddle
     
    #3      
x
×
×