随机退色图像

Question

我想知道有没有人能够帮助或指引我朝着正确的方向发展。

我有一个图像网格。我希望做的是抓住页面上的所有图像，并将它们放在一个数组中（完成）。然后，我每3秒想随机选择一张图片，淡入淡出，并从同一页面中淡入另一张图片。

有人可以帮助我吗？

Answer 1

我有一个很好的剧本我进行一次，它虽然使用jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
var curIndex = 0; 
var src = ['imgs/derp.jpg', 'imgs/derp2.png']; 
var fadeTimeInMilliseconds = 2000; 
var waitTimeInMilliseconds = 5000; 

$(document).ready(function(){ 
    switchImageAndWait(true); 
}); 

function switchImageAndWait(fadeOut2){ 
    if(fadeOut2){ 
     setTimeout(fadeOut, waitTimeInMilliseconds); 
    }else{ 
     var index = Math.floor((Math.random()*src.length)) 
     if(curIndex == index){ 
      index++; 
      if(index >= src.length){ 
       index-=2; 
      } 
     } 
     curIndex = index; 
     $("#swekker").attr("src", src[index]); 
     fadeIn(); 
    } 
} 

function fadeOut(){ 
    $("#swekker").fadeTo(fadeTimeInMilliseconds, 0 , function() { switchImageAndWait(false); }); 
} 

function fadeIn(){ 
    $("#swekker").fadeTo(fadeTimeInMilliseconds, 1 , function() { switchImageAndWait(true); }); 
} 
</script> 

这是连续淡入，等待并再次淡出一个jQuery脚本脚本。

要使用该脚本简单地把它添加到图像：

<img width="602" height="400" src="imgs/derp.jpg" id="swekker"/>