帶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存在正在運行。在解析HTML之後，您需要運行doSlideshow();。您可以通過移動你的腳本標籤頁面的底部做，或者你可以用你來doSlideshow()呼叫$(document).ready()像這樣：

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