Vienkārša slaidrādes automātiska atskaņošana - CSS-triki

HTML

Iesaiņotājs ar divs “slaidiem”, kas var saturēt jebkuru saturu.

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

CSS

Slaidiem jābūt absolūti novietotiem iesaiņojumā. Tam ir niecīgs papildu 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

Palaist pēc tam, kad DOM ir gatavs.

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