1

我目前在我的网站中使用 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>

任何帮助都会非常感激。

谢谢

4

2 回答 2

3

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

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

于 2013-02-01T01:33:27.507 回答
0

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

我注意到您还为事件侦听器使用了其他特定于 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 样式。我希望它无论如何都能证明我的观点。

于 2013-02-04T22:11:01.860 回答