Question

我有一个文件banners.js

function addEvent(object, evName, fnName, cap) {
    if (object.attachEvent)
        object.attachEvent("on" + evName, fnName);
    else if (object.addEventListener)
        object.addEventListener(evName, fnName, cap);
}

var nextAd;

function makeBannerAds() {
    var bannerBox = document.createElement("div");
    bannerBox.id = "bannerBox";
    document.body.appendChild(bannerBox);
    for (var i=0; i<adsURL.length; i++) {
        var bannerAd = document.createElement("div");
        bannerAd.className = "bannerAd";
        bannerAd.style.zIndex = i;
        var urlLink = document.createElement("a");
        urlLink.href = adsURL[i];
        var bannerIndex = document.createElement("img");
        bannerIndex.src = "banner" + i +".jpg";
        bannerIndex.style.width="290px";
        bannerIndex.style.height="55px";
        bannerBox.appendChild(bannerAd);
    }
    bannerBox.appendChild(bannerAd);
    setInterval("changeBannerAd()", 10000);
}

function changeBannerAd() {
    var allAds = document.getElementById("bannerBox").childNodes;
    alert('work');
    for(var i=0; i<num; i++) {
        if(allAds.style.zIndex == 0) {
            allAds.style.top = "-50px";
            nextAd = allAds;
        }
    }

    for(var i=0; i<num; i++) {
        allAds.style.zIndex--;

        if(allAds.style.zIndex < 0)
            allAds.style.zIndex = num-1;
    }

    var timeDelay = 0;
    for(var i=-50; i<=0; i++) {
        setTimeout("moveNextAd(" + i + ")", timeDelay);
        timeDelay += 15;
    }
}

function moveNextAd(top) {
    nextAd.style.top = top + ".px" 
}

addEvent(window, "load", makeBannerAds(), false);

第二个文件 ads.js

var adsURL = new Array();

//this stores each item in the array using a index place holder
adsURL[0] = "testpage0.htm";
adsURL[1] = "testpage1.htm";
adsURL[2] = "testpage2.htm";
adsURL[3] = "testpage3.htm";
adsURL[4] = "testpage4.htm";
adsURL[5] = "testpage5.htm";
adsURL[6] = "testpage6.htm";
adsURL[7] = "testpage7.htm";
adsURL[8] = "testpage8.htm";
adsURL[9] = "testpage9.htm";
adsURL[10] = "testpage10.htm";
adsURL[11] = "testpage11.htm";
//and an html file where these are included.

javascript没有显示任何错误，并且所有语句都在运行，但图片在页面上不可见。我无法解决问题。从最近2天开始工作。

Answer 1

新答案：

我认为你的一些代码必须修改。我刚刚根据我认为的样子进行了编辑。

检查新 jsFiddle 我想这可能会让你更接近。

简而言之，问题是childNodes()返回一个元素数组，所以你需要像数组一样引用该变量

其次，您没有所需的所有附加内容。

var adsURL = new Array();
adsURL[0] = "testpage0.htm";
...
adsURL[11] = "testpage11.htm";

var nextAd;

var moveNextAd = function (top) {
    nextAd.style.top = top + ".px"
}; //changed this to function as variable, answer explained below

var changeBannerAd = function () {
    var num = adsURL.length
    var allAds = document.getElementById("bannerBox")
    allAds = allAds.childNodes;
    //^^^ here is what was wrong
    // Child nodes returns an array of elements
    // So for allAds, you should reference it with allAds[i]
    for (var i = 0; i < num; i++) {
        if (allAds[i].style.zIndex == 0) {
            allAds[i].style.top = "-50px";
            nextAd = allAds[i++];
        }
    }

    for (var i = 0; i < num; i++) {
        allAds[i].style.zIndex--;

        if (allAds[i].style.zIndex < 0) allAds[i].style.zIndex = num - 1;
    }

    var timeDelay = 0;
    for (var i = -50; i <= 0; i++) {
        setTimeout((function () {
            moveNextAd(" + i + ");
        }()), timeDelay);
        timeDelay += 15;
    }
}; //changed this to function as variable too.

function addEvent(object, evName, fnName, cap) {
    if (object.attachEvent) object.attachEvent("on" + evName, fnName);
    else if (object.addEventListener) object.addEventListener(evName, fnName, cap);
}

function makeBannerAds() {
    var bannerBox = document.createElement("div");
    bannerBox.id = "bannerBox";
    document.body.appendChild(bannerBox);
    for (var i = 0; i < adsURL.length; i++) {
        var bannerAd = document.createElement("div");
        bannerAd.className = "bannerAd";
        bannerAd.style.zIndex = i;
        bannerAd.style.position = "absolute";
        var urlLink = document.createElement("a");
        urlLink.href = adsURL[i];
        var bannerIndex = document.createElement("img");
        bannerIndex.src = "banner" + i + ".jpg";
        bannerIndex.style.width = "290px";
        bannerIndex.style.height = "55px";
        urlLink.appendChild(bannerIndex); //Here is the other problem
        bannerAd.appendChild(urlLink); //All these weren't appended
        bannerBox.appendChild(bannerAd); // to each other
    }
    setInterval((function () {
        changeBannerAd();
    }()), 10000);
}

addEvent(window, "load", makeBannerAds(), false);

其次，不要挑剔或任何事情，但你应该将你传递给setInterval或setTimeout的函数声明为变量而不是显式函数，或者像我一样通过匿名函数运行它们。这两个函数使用eval的形式，我们都知道eval is evil，eval is evil和eval is evil

老答案;忽略

问题：您的ads.js是在banners.js之前还是之后添加的尝试在banners.js之前添加脚本标记我刚刚将ads.js内容放在<{> jsFiddle 上的banners.js脚本上方，对我来说效果很好

在顶部查看JS Fiddle的完整代码。

横幅广告在html页面中不可见

1 个答案:

新答案：

老答案;忽略