Απλή παρουσίαση αυτόματης αναπαραγωγής - CSS-Κόλπα

HTML

Περιτύλιγμα με div ως "διαφάνειες", το οποίο μπορεί να περιέχει οποιοδήποτε περιεχόμενο.

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

CSS

Οι διαφάνειες πρέπει να τοποθετούνται απολύτως μέσα στο περιτύλιγμα. Αυτό έχει ένα μικρό επιπλέον pizazz:

#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

Εκτελέστε αφού το DOM είναι έτοιμο.

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