Једноставна аутоматска репродукција презентација - ЦСС-трикови

ХТМЛ

Омотач са дивима као „дијапозитивима“, који може садржати било који садржај.

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

ЦСС

Слајдови морају бити апсолутно постављени унутар омота. Ово има мало додатног пизазза:

#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; )

јКуери ЈаваСцрипт

Покрени након што је ДОМ спреман.

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