Niz daje samo zadnji index - zasto?

Zdravo svima,

ucim js tek neko vreme i eto vec zapinjem, ne znam gde gresim.

html:
<div id="images">
<img src="slike/img1.jpg" title="title 1" />
<img src="slike/img2.jpg" title="title 2" />
<img src="slike/img3.jpg" title="title 3" />
<img src="slike/img4.jpg" title="title 4" />
<p id="description"></p>
</div>


js:

var myImage = document.getElementById('images');
var description = document.getElementById('description');
var imageArray = myImage.getElementsByTagName("img");
var n = imageArray.length;
myImage.style.backgroundImage="url("+imageArray[0].src+")";
description.innerHTML = imageArray[0].getAttribute("title");

function changeImage(){ // zasto daje samo sliku 4 i njen title?
for (i=1;i<n;i++) {
myImage.style.backgroundImage="url("+imageArray.src+")";
description.innerHTML = imageArray.getAttribute("title");
}
}
setInterval(changeImage, 3000);



Hvala unapred na pomoci