Otomatik Oynatılan Basit Slayt Gösterisi - CSS Hileleri

HTML

Herhangi bir içeriği barındırabilen "slaytlar" olarak div'lerin bulunduğu sarmalayıcı.

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

CSS

Slaytların kesinlikle sarıcı içinde konumlandırılması gerekir. Bunda küçük bir miktar ekstra pizazz var:

#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

DOM hazır olduktan sonra çalıştır.

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