Prezentare simplă de redare automată - CSS-Tricks

HTML

Împachetare cu div-uri ca „diapozitive”, care poate conține orice conținut.

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

CSS

Diapozitivele trebuie să fie poziționate absolut în ambalaj. Aceasta are un pic de pizazz suplimentar:

#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

Rulați după ce DOM este gata.

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