隨機退色圖像

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"/>