Plynule se měnící obrázky

Pomocí jednoduché CSS3 vychytávky, kdy obrázky považujeme za pozadí, a trochu JavaScriptu můžeme utvořit jednoduchou přehlídku obrázků.

Kód:

<style>.obrazky { width: 500px;height: 500px; background-position: center center; background-repeat: no-repeat; transition: background-image 0.6s; -webkit-transition: background-image 0.6s }</style>

<script>var num=1; setInterval(function() { num++; switch(num) { case 1: obdiv.style.backgroundImage=’url(„URL prvního obrázku„)‘; break; case 2: obdiv.style.backgroundImage=’url(„URL druhého obrázku„)‘; break;} if(num==2) num=0 },4000)</script>

<div class=“obrazky“ id=“obdiv“></div>

Ukázka:

poznámka: nemusí fungovat ve všech prohlížečích