Ползунок с CSS Только отображение первого изображения

Question

Я пытаюсь заставить ползунок работать здесь и думаю, что у меня есть код, но что-то не работает правильно. Он отображает только изображение в CSS и не вращается через другие.

сценария в заголовке:

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); 
}); 
} 

тела:

<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

Вы скрипт в заголовке работает, прежде чем браузер знает, что .home-middle-part существует. Вам нужно выполнить doSlideshow(); после того, как HTML был проанализирован. Вы можете сделать это, перемещая ваш сценарий тег в нижней части страницы, или вы можете обернуть вызов doSlideshow() в $(document).ready() так:

$(document).ready(function() { 
    doSlideshow(); 
});