Nu wil ik de achtergrond met 5 afbeeldingen laten in/out faden als een soort cycler.
Ik heb een css, een html en een javascript geschreven maar krijg het hele spul niet aan de praat. Dus enige hulp geboden.
<!doctype html>
<html>
<head>
<title>Background Cycler</title>
<script scr="js/jquery-1.11.2.js" type="text/javascript"></script>
<script scr="js/bgcycler.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bgcycler.css">
</head>
<body>
<div id="bgcycler" >
<script type="text/javascript">
$('#bgcycler').hide();//hide the background while the images load, ready to fade in later
</script>
<img class="active" src="/images/bgimages/b1.jpg" alt=""/>
<img src="/images/bgimages/b2.jpg" alt="" />
<img src="/images/bgimages/b3.jpg" alt="" />
<img src="/images/bgimages/b4.jpg" alt="" />
<img src="/images/bgimages/b5.jpg" alt="" />
</div>
</body>
</html>[code lang=js]
function cycleImages(){
var $active = $('#bgcycler .active');
var $next = ($('#bgcycler .active').next().length > 0) ? $('#bgcycler .active').next() : $('#bgcycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(2000,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(window).load(function(){
$('#bgcycler').fadeIn(2000);//fade the background back in once all the images are loaded
// run every 10s
setInterval('cycleImages()', 10000);
})[/code]
[code lang=css]
#bgcycler{
padding:0;
margin:0;
width:100%;
position:fixed;
top:0;
left:center;
z-index:-1;
}
#bgcycler img{
position:fixed;
left:center;
top:0;
width:100%;
z-index:1;
}
#bgcycler img.active{
z-index:3;
}[/code]
Dit is wat ik op het moment heb, ben al een week bezig met oplossingen zoeken.
Maar kan de fout niet vinden.
[size=xsmall]Toevoeging op 26/04/2015 16:30:14:[/size]
ok bedankt!
