自动切换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后，将运行。