Javascript Image-Show Not Continually Looping
I am trying to make a fading image-show for one of my webpages. To this point of time
I have the show working to a point: the array of images cycles through once, however, after the first interval, the loop breaks: after the last image runs its course, the show cycles to a broken image; now, while I was checking what could be causing this occurance, I checked the activity of this element, in my Firefox Inspect Element tool, and there, it shows that there is activity in relation to the show's Javascript function (ie. highlighted attribute tags, that blink, that are associated with the effected webpage element), but I am getting the aforementioned result. Now, this just started to occur: when I first added the image-show to my web-page two days ago, I did not have this problem: the images cycled through the array loop continually. Also, it should be noted that before posting this thread, I tested the aforementioned image-show in IE11, and in the latest releases of, both, Chrome, and Firefox, and in each, the same issue arose; what could be going on here?:
var images= document.getElementById("images");
var gallary= ["sr_i1.jpg", "sr_i2.png", "sr_i3.png", "sr_i4.png"];
var index= 0;
var timer= setInterval(function()
{
imageDisplay()
}, 2000);
function imageDisplay()
{
images.setAttribute("src", gallary[index]);
index++;
timer;
gallary[index].style.transition="opacity 2s";
gallary[index].style.opacity= 1;
if (index >= images.length)
{
index= 0;
}
}
Also, as you can see, I attempted to add a fading transition to the image display in question, but I have not got that working yet: what can I do to achieve such a transition? I am looking for a JQuery-free solution for that.