Presentación de diapositivas de reproducción automática simple - Trucos CSS

HTML

Envoltorio con div como "diapositivas", que puede contener cualquier contenido.

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

CSS

Los portaobjetos deben colocarse absolutamente dentro de la envoltura. Esto tiene un poquito de pizazz 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

Ejecutar después de que DOM esté listo.

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