<style>
#background_cycler{padding:0;margin:0;width:100%;position:absolute;top:0;left:0;z-index:-1}
#background_cycler div{position:absolute;left:0;top:0;width:100%;z-index:1}
#background_cycler div.active{z-index:3}
</style>
<div id="background_cycler" >
<script type="text/javascript">
$('#background_cycler').hide();//hide the background while the images load, ready to fade in later
</script>
<div class="active" style="background-image:url(/images/misc/backgrounds/background_1.jpg) background-size:cover; background-position:center;">
<div style="background-image:url(/images/misc/backgrounds/background_2.jpg) background-size:cover; background-position:center;">
<div style="background-image:url(/images/misc/backgrounds/background_3.jpg) background-size:cover; background-position:center;">
</div>
<script>
function cycleImages(){
var active = jQuery('#background_cycler .active');
var next = (jQuery('#background_cycler .active').next().length > 0) ? jQuery('#background_cycler .active').next() : jQuery('#background_cycler div:first');
next.css('z-index',2);
active.fadeOut(1500,function(){
active.css('z-index',1).show().removeClass('active');
next.css('z-index',3).addClass('active');
});
}
jQuery(window).load(function(){
jQuery('#background_cycler').fadeIn(1500);
setInterval('cycleImages()', 7000);
});
</script>
piggy backed off of this guy https://www.simonbattersby.com/blog/cycling-a-background-image-with-jquery/
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.