仅在javascript中的图像旋转器-没有jquery

Image rotater in javascript only - no jquery

本文关键字：没有 jquery 旋转 图像 javascript 仅在      更新时间：2023-09-26

UPDATE:下面的答案似乎有效，但如果我在描述变量的文本中有链接，它似乎根本不会取代文本。如果我删除标签，或任何html标签从所有的文本，我试图取代，它的工作。问题是，我需要的文本被替换为html格式:(

我试图让一个图像褪色，与文本外的图像褪色，并有另一组出现在同一地方。

jquery由于环境原因无法使用

我想到了这个，唯一的问题是，发生的第一件事是第一个图像在一开始就消失，同样的图像出现。然后，在第一个"故障"之后，它开始正常工作。之后，它似乎工作得很好。

谁能指出我愚蠢的错误?
<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>

修改

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"]
相关文章：