<style>
body { background: #111 }
#MeineBilder { position:relative; height:332px; width:500px; margin: 8em auto; }
#MeineBilder img { position:absolute; left:0; top:0; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="MeineBilder">
<img src="random rotate/img/01_colosseum.png" alt="01 Colosseum" class="active">
<img src="random rotate/img/02_vatican.png" alt="02 Vatican">
<img src="random rotate/img/03_forum_romanum.png" alt="03 Forum Romanum">
<img src="random rotate/img/04_fiat_500.png" alt="04 Fiat 500">
<img src="random rotate/img/06_venetian_gondolas.png" alt="06 Venetian Gondolas">
<img src="random rotate/img/07_pizza.png" alt="07 Pizza">
<img src="random rotate/img/08_pool.png" alt="08 Pool">
<img src="random rotate/img/09_florence.png" alt="09 Florence">
<img src="random rotate/img/10_tower_of_pisa.png" alt="10 Tower Of Pisa">
</div>
<script>
$(function(){
$('#MeineBilder img:gt(0)').hide();
setInterval(function(){$('#MeineBilder :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('#MeineBilder');}, 5000);
});
</script>