Question

我目前在我的网站上使用JS旋转横幅。横幅出现在除大多数IE版本之外的所有浏览器中。

var banners = Array(); //The first element pushed in the array is at the index 0 

banners.push({link: '', target:'_blank', image: '', title: ''});

var rotate = function() {

//Find all images with class myImage
var images = document.getElementsByClassName('myImage');
var total  = images.length;

//Looping through all the elements found
for (var i = 0; i < total; i++) {
    if (banners.length == 0) {
          break;//No more banners can't display anymore
                }

    //Retrieve a random banner
     var rnd = Math.floor((Math.random()*banners.length));
    //Add the html to the element
    images[i].innerHTML = '<a href="'+banners[rnd].link+'" target="'+banners[rnd].target+'"><img src="'+banners[rnd].image+'" title="'+banners[rnd].title+'" /></a>'; //Added target blank and empty alt attribute
    banners.splice(rnd, 1);
}
}

    if (window.addEventListener)  // W3C DOM
    window.addEventListener('load',rotate,false);
else if (window.attachEvent)  // IE DOM
     window.attachEvent("onload", rotate);

然后我在html中使用简单的div调用横幅。

< div class="myImage">< /div>

任何帮助都会受到极大的关注。

谢谢，甲

Answer 1

getElementsByClassName仅在IE9中添加。要支持IE8，您可以使用querySelectorAll(".myImage")，但对于IE7及以下版本，您需要使用不同的内容，例如name属性和getElementsByName。

也就是说，如果页面上只有一个这样的横幅，您可以轻松使用<div id="myImage">和getElementById - 即使在IE的古老版本中也可以使用。

Answer 2

正如其他人所说，大多数IE版本都不支持getElementsByClassName。

我注意到您还在为事件监听器使用其他特定于IE的代码。

这就是为什么像jQuery这样的库已被编写的原因。您需要的所有功能都在jQuery中提供，并且完全兼容跨浏览器。我不知道你是否已经使用它，但我强烈推荐它作为你问题的解决方案;它会使你的代码更整洁。

使用jQuery：

$(document).ready(function() {
    var banners = Array(); //The first element pushed in the array is at the index 0 
    banners.push({link: '', target:'_blank', image: '', title: ''});

    //Find all images with class myImage
    $('.myImage').each(function() {
        //Looping through all the elements found
        if (banners.length == 0) {
              return; //No more banners can't display anymore
        }

        //Retrieve a random banner
        var rnd = Math.floor((Math.random()*banners.length));
        //Add the html to the element
        $(this).html('<a href="'+banners[rnd].link+'" target="'+banners[rnd].target+'"><img src="'+banners[rnd].image+'" title="'+banners[rnd].title+'" /></a>'); //Added target blank and empty alt attribute
        banners.splice(rnd, 1);
    }
});

比你的代码短得多，也更容易阅读。它可以做得更短更高效，但我现在所有的时间都是将现有代码修改为jQuery样式。无论如何，我希望它能证明我的观点。

JS旋转横幅不在IE中显示

2 个答案: