Tayangan slaid Main Auto Secara Mudah - Trik CSS

HTML

Pembungkus dengan div sebagai "slaid", yang dapat berisi kandungan apa pun.

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

CSS

Slaid mesti diletakkan betul-betul di dalam pembungkus. Ini mempunyai sedikit pizazz tambahan:

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

JavaScript jQuery

Jalankan setelah DOM siap.

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