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=”https://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>
MVH
Freddy