Slider with CSS Only Showing First Image - html

Question

I am trying to get the slider to work here and think I have the code but something isn't working right. It is only showing the image in the CSS and not rotating through the other ones.
Script in Header:
var images=new Array('/images/home/AC-InStock-Rotating.jpg', '/images/home/AC- MXV-Rotating.jpg', '/images/home/AC-Rental-Rotating.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.home-middle-part')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
setTimeout(doSlideshow,1000);
});
}
Body:
<div class="home-middle-part">
<div class="container clearfix">
<div class="grid_12 omega" >
<div class="grid_6 omega" >
<div style="padding-left: 10px;">
</div>
</div> <!-- end of grid 6-->
<div class="grid_6 omega" >
<div>
<table>
</table>
</div>
</div> <!-- end of grid 6-->
</div> <!-- end of grid 12 -->
</div> <!-- end of container clearfix -->
</div> <!-- end of home-middle-part -->
CSS
.home-middle-part {
background-image: url("/images/home/body-image banner1.jpg");
background-repeat: no-repeat;
}

Answer 1

You script in the header is running before the browser knows that .home-middle-part exists. You need doSlideshow(); to run after the HTML has been parsed. You can do this by moving your script tag the bottom of the page or you can wrap your call to doSlideshow() in $(document).ready() like so:
$(document).ready(function() {
doSlideshow();
});