kunika: Slideshow mit CSS Sprites

Hey.

Ich habe ein CSS Sprite mit drei Bildern übereinander.
Sprite: 640px hoch, 694px breit
Ein Bild hat die Maße: 640px hoch , 198px breit

Mit Javascript möchte ich nun eine kleine Slideshow erstellen.
Alle 3 Sekunden soll das Bild ausgeblendet und das nächste eingeblendet werden.
Beim 3. anglangt, geht es wieder beim ersten los.
Das sind die Positionen:

.one{ background:url(/Img/slide.png) no-repeat 0 0; width: 640px; height: 198px; }  
.two{ background:url(/Img/slide.png) no-repeat 0 -248px; width: 640px; height: 198px; }  
.three{ background:url(/Img/slide.png) no-repeat 0 -496px; width: 640px; height: 198px; } 

Wie mache ich weiter?
An JS Frameworks darf ich nur jQuery verwenden. Die Ergebnisse die mir Google mit "jquery slideshow sprites" liefert sind schlecht =/, bringen mich nicht weiter. Ich persönlich bin auch ein absoluter Leihe.

Lg, Kunika

  1. @@kunika:

    nuqneH

    Wie mache ich weiter?

    Wie hast du angefangen?

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Wie hast du angefangen?

      Ich habe versucht dieses Skript hier:
      http://jc-designs.net/blog/2010/05/jquery-sprite-slideshow-because-i-wanted-to-see-if-i-could-do-it-with-less/

      von Links nach Rechts auf Oben nach Unten umzuschreiben und meine Bildmaße anzupassen. Leider ist mir das mit Biegen und Brechen nicht gelungen.

      =/

  2. Hallo,

    Ich habe ein CSS Sprite mit drei Bildern übereinander.
    Sprite: 640px hoch, 694px breit
    Ein Bild hat die Maße: 640px hoch , 198px breit

    ich komme mit deiner Rechnung nicht klar. Wenn ein Bild h=640 und w=198 hat, dann hat das Sprite mit drei Bildern übereinander nach meiner Rechnung h=1920 und w=198. Oder die Einzelbilder sind nicht übereinander, sondern nebeneinander, dann wäre es h=640 und w=594.

    .one{ background:url(/Img/slide.png) no-repeat 0 0; width: 640px; height: 198px; }

    .two{ background:url(/Img/slide.png) no-repeat 0 -248px; width: 640px; height: 198px; }
    .three{ background:url(/Img/slide.png) no-repeat 0 -496px; width: 640px; height: 198px; }

      
    Und wie du auf die Verschiebungen um 248px und 496px kommst, ist mir auch nicht klar.  
    Oder hast du im Gesamtbild noch je einen 50px breiten ungenutzten Streifen zwischen den Einzelbildern? Wenn ja, warum?  
      
    Ciao,  
     Martin  
    
    -- 
    Der Professor sitzt beim Essen in der Mensa. Ein Student setzt sich ihm unaufgefordert gegenüber.  
    Professor: Seit wann essen denn Schwein und Adler an demselben Tisch?  
    Student:   Na gut, dann flieg' ich eben zum nächsten Tisch.  
      
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    
    1. ich komme mit deiner Rechnung nicht klar. Wenn ein Bild h=640 und w=198 hat, dann hat das Sprite mit drei Bildern übereinander nach meiner Rechnung h=1920 und w=198. Oder die Einzelbilder sind nicht übereinander, sondern nebeneinander, dann wäre es h=640 und w=594.

      Sorry, andersrum: 640 breit, 198 hoch =/

      Und wie du auf die Verschiebungen um 248px und 496px kommst, ist mir auch nicht klar.
      Oder hast du im Gesamtbild noch je einen 50px breiten ungenutzten Streifen zwischen den Einzelbildern? Wenn ja, warum?

      Hat der Sprite-Generator so gemacht ^^. Aber gut, Positionen usw kann man ja nachträglich ändern!