Question

下面列出了分配的问题。

分配：要创建此应用程序，您需要添加位于网页右上角的横幅广告框。广告将以不同的z-index值堆叠在一起。要显示不同的广告，您的程序将更改z-index数字，将底部置于堆栈顶部。为了使应用程序在视觉上有趣，Hellen希望新广告从顶部向下滚动，取代当前显示的广告。

我的问题：无法让横幅显示在网页的右上角。

＆＃13;

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 8
   Case Problem 1

   Author:
   Date:
   
   Filename: banners.js


   Global Variables
   nextAd
      Used to track the next ad to be displayed in the banner box


   Functions
  
   addEvent(object, evName, fnName, cap)
      Run the function fnName when the event evName occurs in object.

   makeBannerAds()
      Create the banner box and stacked collection of banner ads

   changeBannerAd()
      Change the ad displayed in the banner box by changing the stacking
      order of the ads

   moveNextAd(top)
      Move the nextAd object down top pixels from its current location.

*/


//this is the global scope here when you declare out side of a function it because global or at the top of the js file
var nextAd;




function addEvent(object, evName, fnName, cap) {
  if (object.attachEvent)
    object.attachEvent("on" + evName, fnName);
  else if (object.addEventListener)
    object.addEventListener(evName, fnName, cap);
}

/* Add new code below */

var nextAd;

addEvent(window, "load", makeBannerAds, false);

function makeBannerAds() {
  var bannerBox = document.createElement("div");
  bannerBox.id = "bannerBox";

  for (var i = 0; i < num; 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";
    bannerBox.appendChild(bannerAd);
  }
  document.body.appendChild(bannerBox);
  setInterval("changeBannerAd()", 10000);
}

function changeBannerAd() {
  var allAds = document.getElementsByTagName('body')[0].appendChild(bannerBox);

  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("moveNextAd(" + i + ")", timeDelay);
    timeDelay += 15;
  }
}

function moveNextAd(top) {
  nextAd.style.top = top + ".px";
}


/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 8
   Case Problem 1

   Author:
   Date:

   Filename: ads.js


   Global Variables:
  
   adURLs
      An array of URL for banner ads


*/

var num = 11;
var adsURL = new Array(num);

for (var i = 0; i < adsURL.length; i++) {
  adsURL[i] = "testpage" + i + ".htm";
}

＆＃13;

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 8
   Case Problem 1
   Filename: bannerstyles.css

   This file contains styles used for the rotating ad banners
*/

#bannerBox {
  position: absolute;
  top: 15px;
  left: 470px;
  z-index: 10;
  width: 300px;
  height: 60px;
  overflow: hidden
}
.bannerAd {
  position: absolute;
  width: 300px;
  height: 60px;
  top: 0px;
  left: 0px
}
.bannerAd img {
  border-width: 0px width: 300px;
  height: 60px;
}
/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 8
   Case Problem 1
   Filename: bw.css

   This file contains styles used in the books.htm file.

*/

* {
  padding: 0px;
  margin: 0px
}
body {
  font-size: 12px;
  font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
  background: white url(leftbar.jpg) repeat-y
}
a {
  display: block;
  text-decoration: none
}
ul {
  list-style-type: none
}
label {
  display: block
}
fieldset {
  border-width: 0px
}
#page {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 750px
}
#heading {
  width: 100%;
  text-align: left;
  border-bottom: 1px solid rgb(102, 51, 0);
  margin: 0px;
  padding: 0px;
  background-color: white
}
#menu {
  width: 100%;
  margin: 0px;
  padding: 0px
}
#menu li {
  width: 14%;
  text-align: center;
  height: 20px;
  float: left
}
#menu li a {
  color: rgb(102, 51, 0);
  background-color: white;
  border: 1px solid rgb(102, 51, 0)
}
#menu li a:hover {
  color: rgb(255, 255, 153);
  background-color: rgb(102, 51, 0)
}
#menu2 {
  clear: left;
  float: left;
  width: 200px;
  padding-top: 10px;
  margin: 0px 30px 0px 20px
}
#menu2 li {
  width: 95%;
  text-align: left;
  margin-bottom: 3px
}
#menu2 li a {
  width: 100%;
  color: black
}
#menu2 li a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 153)
}
#menu2 .newgroup {
  margin-top: 20px
}
#main {
  float: left;
  width: 450px
}
#main a {
  display: inline;
  text-decoration: underline;
  color: rgb(116, 95, 88)
}
#main h2 {
  font-size: 20px;
  color: rgb(102, 51, 0);
  margin-top: 10px;
  font-weight: normal;
  letter-spacing: 5px
}
#main p {
  margin: 10px 0px 10px 20px
}
#signature {
  text-align: right;
  line-height: 0.8
}

＆＃13;

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 8
   Case Problem 1

   Online Bookworms Home Page
   Author:
   Date:          

   Filename:         books.htm
   Supporting files: ads.js, banner0.jpg - banner10.jpg, banners.js, 
                     bannerstyles.css, bw.css, bwlogo.jpg,
                     signature.jpg, testpage0.htm - testpage10.htm
-->
  <title>Online Bookworms</title>
  <link href="bw.css" rel="stylesheet" type="text/css" />
  <link href="bannerstyles.css" rel="stylesheet" type="text/css" />
  <script src="ads.js" type="text/javascript"></script>
  <script src="banner.js" type="text/javascript"></script>


  <head>
    <!-- 
   
-->
    <title>Online Bookworms</title>
    <link href="bw.css" rel="stylesheet" type="text/css" />
    <link href="bannerstyles.css" rel="stylesheet" type="text/css" />

    <script src="ads.js" type="text/javascript"></script>
    <!--calls the external file called slideshow.js -->
    <script src="banners.js" type="text/javascript"></script>
    <!--calls the external file called slideshow.js -->




  </head>

  <body>
    <div id="page">
      <h1 id="heading"><img src="bwlogo.jpg" alt="Online Bookworms" />
	  
	  <script type="text/javascript>
	  storeURL();
	  </script>
	  
	  </h1>

      <ul id="menu">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Reviews</a>
        </li>
        <li><a href="#">Forums</a>
        </li>
        <li><a href="#">Book Swaps</a>
        </li>
        <li><a href="#">OBW Store</a>
        </li>
        <li><a href="#">Author's Corner</a>
        </li>
        <li><a href="#">My Account</a>
        </li>
      </ul>

      <ul id="menu2">

        <li><a href="#">My Reading List</a>
        </li>
        <li><a href="#">Review a Book</a>
        </li>
        <li><a href="#">Join a Discussion</a>
        </li>
        <li><a href="#">Post to a Forum</a>
        </li>
        <li><a href="#">My Mail</a>
        </li>
        <li><a href="#">My Posts</a>
        </li>

        <li class="newgroup"><a href="#">Reading Recommendations</a>
        </li>
        <li><a href="#">Books of the Month</a>
        </li>

        <li class="newgroup"><a href="#">MP3 Downloads</a>
        </li>
        <li><a href="#">Podcast</a>
        </li>
        <li><a href="#">RSS Feeds</a>
        </li>

        <li class="newgroup"><a href="#">Tech Support</a>
        </li>
        <li><a href="#">Comments</a>
        </li>
        <li><a href="#">About online BookWorms</a>
        </li>
      </ul>

      <div id="main">
        <h2>Welcome</h2>
        <p>Welcome to <strong>online BookWorms</strong> &mdash; your location on the Web for books, magazines, short stories, poetry, and essays. Please explore our online bookstore for the lowest prices on new and rare books. Share your love of reading by
          joining one of our many forums and discussion groups. Are you an aspiring critic? We welcome book reviews and essays on your favorite authors and works.
        </p>
        <h2>News</h2>
        <p>We are very happy to introduce the <a href="#">online BookWorms
            Podcast</a>. The podcast will contain free excerpts from great works of fiction and reviews of current books. You can quickly subscribe to this new BookWorms feature <a href="#">here</a>.
        </p>
        <p>Take a few moments now to explore our book shelves. And remember to patronize our sponsors by clicking the banner ads at the top of the page. Enjoy browsing our site!
          <p id="signature">
            <img src="signature.jpg" alt="Helen Ungerstatz" />
          </p>
      </div>

    </div>
  </body>

</html>

＆＃13;

Answer 1

我在你的代码中发现了一些错误。你需要使用

document.body.appendChild（bannerBox）;

而不是

document.appendChild（bannerBox）;

我在进行此更正后运行了您的代码http://jsbin.com/zavoyuyife/1/edit并将bannerBox元素添加到正文中。您可以在Firebug（firefox）或Chrome检查器中看到它。要使其在视觉上显示，您需要为bannerAd类提供适当的高度和宽度。在您的代码中，因为您没有提到CSS，所以当我在JSBin中运行它时，它在页面上看不到。

在makeBannerAds方法中，您将创建锚点和img元素，但不会添加到bannerAd元素。

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";

希望这有帮助。

让<div>显示在标题标记</div>中

1 个答案: