自動切換div的背景圖像？

Question

這就是我現在所擁有的，並且刷新後div＃hero的三個背景圖像會發生變化。有沒有簡單的方法來調整它，使它們在x秒後褪色到替代圖像，而不是刷新？

<script type="text/javascript">var imgCount = 3; 
    var dir = 'images/'; 
    var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1; 
    var images = new Array 
      images[1] = "1.jpg", 
      images[2] = "2.jpg", 
      images[3] = "3.jpg", 
    document.getElementById("hero").style.backgroundImage = "url(" + dir + images[randomCount] + ")";</script> 

Answer 1

包裝你的代碼的功能和使用，裏面的setInterval方法：

var interval_time = 5000;//in milliseconds 
setInterval(your_function,interval_time); 
function your_function(){ 
var imgCount = 3; 
    var dir = 'images/'; 
    var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1; 
    var images = new Array 
      images[1] = "1.jpg", 
      images[2] = "2.jpg", 
      images[3] = "3.jpg", 
    document.getElementById("hero").style.backgroundImage = "url(" + dir + images[randomCount] + ")"; 
} 

現在，每次interval_timeyour_function後，將運行。