выцветание в случайном порядке

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