Jednoduchá prezentace s automatickým přehráváním - Triky CSS

HTML

Obálka s divy jako „snímky“, které mohou obsahovat jakýkoli obsah.

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

CSS

Sklíčka musí být absolutně umístěna uvnitř obalu. To má trochu navíc 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; )

JavaScript jQuery

Spusťte poté, co je DOM připraven.

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