javascript - 仅在 javascript 中旋转图像 - 无 jquery

Question

更新:下面的答案似乎有效，但如果我的描述变量中的文本中有链接，它似乎根本无法替换文本。如果我从我试图替换的所有文本中删除标签或任何 html 标签，它就会起作用。问题是，我需要将文本替换为 html 格式:(

我试图让图像淡出，图像外部的文本也淡出，并让另一组出现在同一位置。

由于环境原因，无法使用jquery

我想出了这个，唯一的问题是，首先发生的事情是第一个图像在一开始就消失并且出现相同的图像。然后在第一个“故障”之后它开始正常工作。之后，if 似乎工作得很好。

有人可以指出我的愚蠢错误吗？

<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

改变这个

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