Enkelt bildspel med jQuery

Idag har jag fotograferat klockor, redigerat bilderna, lagt till texter och sedan gjort ett simpelt bildspel i jQuery av alltihopa. Kolla in förstasidan på swedeximport.se med jQuery-bildspelet

HTML och CSS till bildspelet

Easy Peasy HTML:

<div class=”bildspel”>
<img src=”/images/bild1.jpg”>
<img src=”/images/bild2.jpg”>
<img src=”/images/bild3.jpg”>
</div>

och CSS:

<style>
.bildspel { position:relative; width:598px; height:417px; }
.bildspel img { position:absolute; left:20; top:0; }
</style>

jQuery-delen

Och sedan lite jquery till bildspelet med fade in/fade out och där jag växlar mellan bilderna med 4,5 sekunders mellanrum:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>

<script>
$(function(){
$(‘.bildspel img:gt(0)’).hide();
setInterval(function(){$(‘.bildspel :first-child’).fadeOut().next(‘img’).fadeIn().end().appendTo(‘.bildspel’);}, 4500);
});
</script>

Allt av det ovanstående ska förstås ligga mellan taggarna <head> och </head>

Se bildspelet här

MVH

Freddy