Apresentação de slides com reprodução automática simples - CSS-Tricks

HTML

Wrapper com div's como “slides”, que podem conter qualquer conteúdo.

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

CSS

As lâminas precisam estar absolutamente posicionadas dentro da embalagem. Isso tem um pouco de entusiasmo extra:

#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

Execute depois que o DOM estiver pronto.

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