Egyszerű automatikus lejátszás Slideshow - CSS-trükkök

Anonim

HTML

Burkoló, amelynek div-ja a „diák”, amely bármilyen tartalmat tartalmazhat.

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

CSS

A diákat abszolút helyen kell elhelyezni a burkolatban. Ebben van egy kis extra 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

Futtassa, miután a DOM készen áll.

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

Nézd

Lásd Chris Coyier (@chriscoyier) Pen Simple jQuery diavetítését a CodePen-en.

Nagyon hasonló a Snooktól.