Yksinkertainen automaattinen diaesitys - CSS-temppuja

HTML

Kääre, jossa diat ovat ”diat”, jotka voivat sisältää mitä tahansa sisältöä.

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

CSS

Dioja on ehdottomasti sijoitettava kääreen sisään. Tässä on pieni ylimääräinen 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

Suorita, kun DOM on valmis.

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