Jednostavna automatska reprodukcija prezentacije - CSS-trikovi

HTML

Omotač s divima kao "dijapozitivima", koji može sadržavati bilo koji sadržaj.

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

CSS

Dijapozitivi moraju biti apsolutno postavljeni unutar omota. Ovo ima malo dodatnog pizazza:

#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

Pokreni nakon što DOM bude spreman.

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