Paprasta skaidrių demonstracija automatiškai - CSS-gudrybės

HTML

Vyniotuvas, kurio „skaidrės“ yra „div“, kuriame gali būti bet koks turinys.

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

CSS

Skaidrės turi būti absoliučiai išdėstytos vyniotinyje. Tai turi šiek tiek papildomų 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; )

„jQuery JavaScript“

Vykdykite, kai DOM bus paruoštas.

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