I wish to rotate a background image of a div which I believe precludes me from using the excellant jQuery Cycle Plugin.
The code below is what I have so far but it does not behave as I would like, which is:
- Fade out first image
- Swap image with second image while not showing an image - (fails this Fade in second image)
- And repeat into infinity ...and beyond.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#mydiv {
width: 100%;
height: 365px;
margin-left: auto;
margin-right: auto;
position: relative;
display: block;
background: url(HP_jQuery1.jpg) center top no-repeat;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
var firstTime = true;
var arr = ["url(HP_jQuery2.jpg)", "url(HP_jQuery3.jpg)"];
(function recurse(counter) {
var bgImage = arr[counter];
if (firstTime == false) {
$("#mydiv").fadeOut("slow");
$('#mydiv').css('background-image', bgImage);
$("#mydiv").fadeIn("slow");
} else {
firstTime = false;
}
delete arr[counter];
arr.push(bgImage);
setTimeout(function() {
recurse(counter + 1);
}, 3600);
})(0);
});
</script>
</head>
<body>
<div id="mydiv"> </div>
</body>