Einfache Diashow mit automatischer Wiedergabe - CSS-Tricks

HTML

Wrapper mit divs als "Folien", die jeden Inhalt enthalten können.

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

CSS

Die Objektträger müssen unbedingt in der Verpackung positioniert sein. Dies hat ein kleines bisschen mehr 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

Führen Sie aus, nachdem DOM bereit ist.

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