0

私はファイル 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);

2 番目のファイル 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日間から働いています。

4

1 に答える 1

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これらの 2 つの関数は eval の形式を使用します。誰もが知っているように、eval は悪であり、eval は悪であり、eval は悪です。

古い答え; 無視

質問: あなたの ads.js は、 banners.jsの前または後に追加されていますか banners.js の前に script タグを追加してads.jsみbanners.jsてください

上部にある完全なコードについては、JS Fiddle を確認してください。

于 2013-03-12T11:55:06.457 に答える