Eenvoudige automatisch spelende diavoorstelling - CSS-trucs

HTML

Wrapper met div's als de "dia's", die elke inhoud kunnen bevatten.

   Pretty cool eh? This slide is proof the content can be anything.

CSS

Dia's moeten absoluut in de wikkel worden geplaatst. Dit heeft een klein beetje extra pit:

#slideshow ( margin: 50px auto; position: relative; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4); ) #slideshow > div ( position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; )

jQuery JavaScript

Rennen nadat DOM klaar is.

$("#slideshow > div:gt(0)").hide(); setInterval(function() ( $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); ), 3000);