Image rotater in javascript only - no jquery

Question

UPDATE: The answer below seemed to work, but if I have links in my text in the descriptions variable, it doesn't seem to replace the text at all. If i remove tags, or any html tags from all the text I am trying to replace, it works. Issue is, I need the text to be replaced to be html format :(

I am trying to get an image to fade, with text outside of the image to fade as well, and have another set appear in same place.

jquery can not be used due to the environment.

I came up with this, the only issue is that the very first thing that happens is the first image fades at the very start and the same image appears. Then it starts working normal after that first "glitch". After that, if seems to work perfectly.

Can someone point out my silly mistake?

<script type="text/javascript">
        var links = ["http://www.firstlink.com","http://www.secondlink.com","http://www.thirdlink.com"];
        var images = ["1stimage.jpg","2ndimage.jpg","3rdimage.jpg"];

       var descriptions=["this is the first set of rotating text", "Now we have another set of text, in this large paragraph.  Write whatever we want here", "and this is the last set of text, we have 3 images.  We can add more images and more text."]

        var i = 0;

        var renew = setInterval(function(){
            if(links.length == i){
                i = 0;
            }
            else {


           document.getElementById("bannerImage").src = images[i];
           fadeIn(document.getElementById("bannerImage"), 1000);
            document.getElementById("bannerLink").href = links[i];
            document.getElementById("p1").innerHTML= descriptions[i];


            i++;

        }
        },5000);
        </script><script type="text/javascript">
function fadeIn(el, time) {
  el.style.opacity = 0;
  el.style.display = "block";

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / time;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };

  tick();
}
</script><a href="http://www.1stlink.com" id="bannerLink" onclick="void window.open(this.href); return false;"><img alt="some text" height="83" id="bannerImage" src="1stimage.jpg" width="633" /> </a>
<p id="p1">this is the first set of rotating text</p>

Answer 1

Change this

var images = ["1stimage.jpg","2ndimage.jpg","3rdimage.jpg"];
var descriptions=["this is the first set of rotating text", "Now we have another set of text, in this large paragraph.  Write whatever we want here", "and this is the last set of text, we have 3 images.  We can add more images and more text."]

to this

var images = ["2ndimage.jpg","3rdimage.jpg","1stimage.jpg"];
var descriptions=["Now we have another set of text, in this large paragraph.  Write whatever we want here", "and this is the last set of text, we have 3 images.  We can add more images and more text.", "this is the first set of rotating text"]