[Javascript] Autoplay Funktion

[ddjjmm]

Hallo zusammen,

ich habe mittels CSS und Javascript einen Slider (Slideshow) gebaut. Bei diesem wird bei MouseOver oder Klick auf die Navigationsbuttons jeweils das nächste Bild angezeigt.

Hierbei wird lediglich im CSS das Attribut display auf block bzw. none gesetzt. Funktioniert auch prima und vor allem problemlos.

Natürlich wäre es schön, das ganze auch mit einer Art AutoPlay zu realisieren, sprich die Slides wechseln sich automatisch. Umgesetzt müsste dann wohl ein Javascript eine Art Intervall besitzen, bei dem alle X Sekunden der CSS display Wert der einzelnen Slides automatisch geändert wird von block --> none etc.

        <script type="text/javascript">
            function slide(teaser) {
                if (document.getElementById('teaser-1').style.display=='block') {
                document.getElementById('teaser-1').style.display='none';
                document.getElementById('teaser-2').style.display='block'; 
                }
            }
        </script>

Jemand eine Idee? Habe mir schon andere Slideshows angeschaut aber entweder hilft mir der Code nicht weiter, oder ich kann damit schlichtweg nichts anfangen.

Vielen Dank im Voraus

 

[Duddle]

AW: [Javascript] Autoplay Funktion

Du kannst eine Funktion periodisch aufrufen. Falls du also eine Funktion zum Weiterschalten hast, dann könntest du die in ein setInterval packen.

Abgesehen davon benutzt deine slide()-Funktion den Parameter nicht. Und abgesehen vom Abgesehenen solltest du das Rad nicht ständig neu erfinden (Ausnahme für Lernzwecke), es gibt dutzende an SlideShows die deine notwendige Funktionalität mitbringen.


Duddle

 

[ddjjmm]

AW: [Javascript] Autoplay Funktion

Würde das Problem gerne ein wenig allgemeiner halten da ich aktuell auf keine Lösung komme.

Mittels Javascript kann ich doch zeitgesteuert Ereignisse ausführen. Ich möchte z.B. alle X Sekunden diverse CSS Werte manipulieren. Hat jemand da ein hilfreiches Stück Code? Kenne mich damit leider nicht aus bzw. konnte bislang keine Slideshow auseinander nehmen, um Hilfe zu bekommen.

 

[cebito]

AW: [Javascript] Autoplay Funktion

Mittels Javascript kann ich doch zeitgesteuert Ereignisse ausführen. Ich möchte z.B. alle X Sekunden diverse CSS Werte manipulieren. Hat jemand da ein hilfreiches Stück Code?

Duddle hat dich doch schon mit der Nase drauf gestoßen

setInterval

folgst du auch den Links, die man dir gibt?

 

[mindraper]

AW: [Javascript] Autoplay Funktion

hi.

hilfreiche codestücke:
- setInterval
- setTimeout

eine kleine helperfunction, um nicht dauern "this.style.WERT" oder "ELEMENT.style.WERT" schreiben zu müssen:

function setCSS( element, styles ){
   var rule;
   for( rule in styles ){
      element.style[rule] = styles[rule];
   }
}

nutzung dann wie folgt (beispielhaft):

var div = document.getElementById( 'meinDiv' );
setCSS( div, {
   backgroundColor : '#ff0000',
   width : '300px',
   height : '300px'
});

sollen via setCSS() mehrere elemente ( z.b. eine nodelist ) gleichzeitig bearbeitet werden, musst du setCSS() anpassen:

function setCSS( elements, styles ){
   var i, rule;
   // Check ob es eine NodeList ist
   if( elements.length && typeof elements !== 'string' && typeof elements !== 'function' && !elements.push ){
      for( i = 0; i < elements.length; i = i+1 ){
          for( rule in styles ){
             elements[i].style[rule] = styles[rule];
          }
      }
   }
   // Check auf Einzelelement, das ein HTML-DOMElement sein muss
   if( elements.nodeType && elements.nodeType === 1 ){
      for( rule in styles ){
         elements.style[rule] = styles[rule];
      }
   }
}

diese function kann dann auch so genutzt werden:

mit mehreren elementen:

var divs = document.getElementsByTagName( 'div' );
setCSS( divs, {
   backgroundColor : '#ff0000',
   width : '300px',
   height : '300px'
});

oder weiterhin mit einem einzelnen element ( wie vorher auch ):

var div = document.getElementById( 'meinDiv' );
setCSS( div, {
   backgroundColor : '#ff0000',
   width : '300px',
   height : '300px'
});

wie von Duddle schon gesagt, kannst du dir diese arbeit ( und alles das, was sonst noch kommt ) auch sparen, wenn du ein framework nutzt. sowas haben meines wissens nach alle frameworks drauf, zumindest bieten sie schon alle einzelteile, die du für eine "slideshow" brauchst. denn nur mit dem setzen von einzelnen styles ist es nicht getan, sofern du die bilder / divs / whatever wirklich "sliden" willst.

hoffe das hilft