Frontpage Slideshow

[socke999]

Hallo,

kennt jemand zufällig schon ein fertiges Skript das sowas

http://www.frontpageslideshow.net/

macht?


Sonst muss ich versuchen mir selbst sowas zu basteln ...

 

[Paspirgilis]

HTML:

<div class="slide_wrap">
   <div class="load_slide">Slide wird geladen</div>
   <div class="slide">Slide1</div>
   <div class="slide">Slide2</div>
   <div class="slide">Slide3</div>
   <div class="slide">Slide4</div>
</div>

CSS:

.load_slide{
   display: block;
}
.slide{
   display: none;
}

JS:

if($$('.slide')[0])
   {
   slideTime = 5.0; //Zeit nach wieviel Sekunden der slide gemacht werden soll
   $$('.load_slide')[0].style.display = "none";
   $$('.slide')[0].style.display = "block";
   if($$('.slide').length > 1)
      setInterval('doSlide', (slideTime*1000));
   }
function doSlide()
   {
   for(i=0 ; i < $$('.slide').length ; i++)
      if($$('.slide')[i].style.display == "block")
         var slideNumber = i;
   if(slideNumber == $$('.slide').length)
      var nextSlideNumber = 0;
   else
      var nextSlideNumber = slideNumber+1;
   Effect.Opacity($$('.slide')[slideNumber], { from: 1, to: 0 });
   setTimeout('$$(".slide")[' + slideNumber + '].style.display = "none";',1000);
   Effect.Opacity($$('.slide')[nextSlideNumber], { from: 0, to: 1 });
   $$(".slide")[nextSlideNumber].style.display = "block";
   }

Hab dir was gebastelt.
Hoffe dir gefällts und es ist Fehlerfrei, habe es nicht getestet.
Gib bitte Rückmeldung.

MFG
Mark Paspirgilis

PS: Ich ging jetzt davon aus das du Prototype mit eingebunden hast...
PPS: Und Script.aculo.us

 

[socke999]

Also ich irgend ein Fehler ist in deinem JS in der Zeile.
Effect.Opacity($$('.slide')[slideNumber], { from: 1, to: 0 });

Jo Prototype und Scriptacoulus ist klar,
ich hab jetzt selbst begonnen so was zu implementieren ...

Allerdings weis ich nicht so recht, wie ich das mit CSS machen soll, dass 2Divs Untereinander liegen oder so ...

Denn ich würde das auch so machen wie du:

<div class="slide_wrap">
   <div class="load_slide">Slide wird geladen</div>
   <div id="S1" class="slide">Slide1</div>
   <div id="S2"  class="slide">Slide2</div>
   <div id="S3"  class="slide">Slide3</div>
   <div id="S4"  class="slide">Slide4</div>
</div>

nur wie muss ich das zum beispiel machen, wenn von id='S1' auf id ='S2' mit Effect.Opacity() umblenden lassen will ... Wie macht man das am Besten in CSS?

 

[Paspirgilis]

1. Das parent div also .slide_wrap position relative deklarieren.
2. Das neue div absolute positionieren.
3. Nach den opacity effekten das vorherige display none setzen und das neue position relative setzen.


Wenn du es absolute positionierst dann musst du auch left: 0; und top: 0; machen.
Das absolute positionierte wird dann über dem anderen liegen.
Viel spaß noch .
Über eine positive Bewertung würd ich mich freuen wenn ich dir Helfen konnte.

MFG
Mark Paspirgilis