Alterando a fonte de várias imagens usando o jquery (e outras coisas também) - javascript, jquery, html

Eu sou um iniciante em javascript e jquery e eutem 11 tags de imagem em html. eu quero basicamente alterar as fontes dessas tags usando js e jquery. Este código não está funcionando e não estou recebendo nenhum erro no firebug, alguém pode me dizer onde estou fazendo errado?

var imagesArray2=["01.png","02.png","03.png","04.png","05.png","06.png","07.png","08.png","09.png","10.png","11.png"];
var elementArray2 = ["#img1","#img2","#img3","#img4","#img5","#img6","#img7","#img8","#img9","#img10","#img11"];
var imagesArray,elementArray;
var elementInArray;

documento pronto

$(function(){
setInterval(Myfunction(),1000);});

meu código de função que tem um loop baseado em elementsInArray valor da variável e chama imageFadeAnimations função

function Myfunction(){
if(elementsInArray === 0){
imagesArray = imagesArray2;
elementArray = elementArray2;
elementsInArray = elementArray.length;
var imageChanges = Math.floor(Math.random()*elementsInArray);
imageFadeAnimations(imageChanges);
}
else
{
elementsInArray=elementArray.length;
imageChanges = Math.floor(Math.random()*elementsInArray);
imageFadeAnimations(imageChanges);
}
}

leva um inteiro como argumento

function imageFadeAnimations(imageChanges){
for(var k = 0;k<imageChanges;k++){
var element = Math.floor(Math.random()*elementsinArray);
var image=Math.floor(Math.random()*elementsinArray);
imageChanger(elementArray[element],imageArray[image]);
elementArray.splice(element,1);
imagesArray.splice(image,1);
}
}
function imageChanger(b1,b2){
$(b1).fadeOut(500,function(){
$(b1).attr("src",b2);
$(b1).fadeIn(500);
});
}

Respostas:

2 para resposta № 1

Você está transformando o tempo pesado em algo que o jQuery pode tornar muito simples.

Primeiro envolva suas imagens em um elemento (normalmente um div ou um intervalo) com id="imageContainer".

Agora, se bem entendi, seu código irá simplificar para:

$(function() {
var imagesArray = ["01.png", "02.png", "03.png", "04.png", "05.png", "06.png", "07.png", "08.png", "09.png", "10.png", "11.png"],
$images = $("img", "#imageContainer");

setInterval(function() {
$images.each(function() {
var $img = $(this),
i = Math.min(imagesArray.length-1, Math.floor(Math.random() * imagesArray.length));
$img.fadeOut().promise().then(function() {
$img.attr("src", imagesArray[i]).fadeIn(500);
});
});
}, 1000);
});

EDITAR 1

Como @mplungjan aponta abaixo ...

Se os nós img foram inicializados com src atributos, então imagesArray pode ser composto pegando os srcs do DOM da seguinte maneira (substituindo as duas linhas acima):

    var $images = $("img", "#imageContainer"),
imagesArray = $images.map(function() { return this.src; }).get();

---

-1 para resposta № 2

Acredito que este código jquery / zepto não seja o menor, mas o mais fácil de entender:

function changeImg(){
$("#img1").attr("src", "01.png");
$("#img2").attr("src", "02.png");
$("#img3").attr("src", "03.png");
$("#img4").attr("src", "04.png");
$("#img5").attr("src", "05.png");
$("#img6").attr("src", "06.png");
};

---