尝试使用 JavaScript 和两个包装器更改标头背景图像

Question

我创建了一个标题，可以在计时器上更改其背景图像。但是，我似乎无法再次为另一个网站执行此操作。

我的第一次尝试是在 http://www.MiahMedia.com(它在这里工作正常(。但是当我尝试通过复制和粘贴代码来重新执行此操作时，它不起作用。

// Just a help to change the background-image
var changeImage = function(id, image) {
  $(id).css('background-image', 'url(' + image + ')');
};
// Below is for the homepage
//Auto change Background Image over time
$(window).load(function() {
  var images = ['tempheader3.jpg', 'tempheader4.jpg', 'tempheader5.jpg'];
  // Your pretty counter
  var i = 0;
  // Init sequence, loading the first image
  $("#wrapper_bottom").css("opacity", 0);
  changeImage('#wrapper_bottom', images[i]);
  changeBackground();
  // Your function
  // TODO: you should declare this outside of this scope
  function changeBackground() {
    $('#wrapper_bottom')
      .animate({
        "opacity": 1
      }, 2000, function() {
        changeImage('#wrapper_top', images[i], 1);
        if (++i >= images.length) {
          i = 0;
        }
        $("#wrapper_bottom").css("opacity", 0);
        changeImage('#wrapper_bottom', images[i]);
      });
  }
  setInterval(changeBackground, 5000);
});

header {
  height: 500px;
  width: 100%;
  min-width: 800px;
  background-size: cover;
  background-position: center top;
  background-image: url(tempheader.jpg) -webkit-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
}
#wrapper_top {
  height: 500px;
  width: 100%;
  min-width: 800px;
  background-size: cover;
  background-position: center top;
  z-index: 0;
  position: absolute;
  -webkit-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
}
#wrapper_bottom {
  height: 500px;
  width: 100%;
  min-width: 800px;
  background-size: cover;
  background-position: center top;
  z-index: -1;
  top: 0;
  position: absolute;
  -webkit-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div id="wrapper_top">
    <div class="nav-container">
      <nav>
        <ul>
          <li class="navigation-bar"><a class="glow" href="index.html">Home</a></li>
          <li class="navigation-bar"><a class="glow" href="About.html">About</a></li>
          <li class="navigation-bar"><a class="glow" href="Cafe.html">Cafe</a></li>
          <li class="navigation-bar"><a class="glow" href="Contact.html">Contact</a></li>
        </ul>
      </nav>
    </div>
    <img src="out_and_up_logo.png" class="logo" style="height: 450px; width: 550px; margin-left: 20px;">
    <div id="wrapper_bottom">
    </div>
  </div>
</header>

Answer 1

当我添加图像的绝对路径时，它可以工作

// Just a help to change the background-image
    var changeImage = function(id, image) {
      $(id).css('background-image', 'url(' + image + ')');
    };
    // Below is for the homepage
    //Auto change Background Image over time
    $(window).load(function() {
      var images = ['http://www.miahmedia.com/tempheader3.jpg', 'http://www.miahmedia.com/tempheader4.jpg', 'http://www.miahmedia.com/tempheader5.jpg'];
      // Your pretty counter
      var i = 0;
      // Init sequence, loading the first image
      $("#wrapper_bottom").css("opacity", 0);
      changeImage('#wrapper_bottom', images[i]);
      changeBackground();
      // Your function
      // TODO: you should declare this outside of this scope
      function changeBackground() {
        $('#wrapper_bottom')
          .animate({
            "opacity": 1
          }, 2000, function() {
            changeImage('#wrapper_top', images[i], 1);
            if (++i >= images.length) {
              i = 0;
            }
            $("#wrapper_bottom").css("opacity", 0);
            changeImage('#wrapper_bottom', images[i]);
          });
      }
      setInterval(changeBackground, 5000);
    });

header {
      height: 500px;
      width: 100%;
      min-width: 800px;
      background-size: cover;
      background-position: center top;
      background-image: url(tempheader.jpg) -webkit-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
      box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
    }
    #wrapper_top {
      height: 500px;
      width: 100%;
      min-width: 800px;
      background-size: cover;
      background-position: center top;
      z-index: 0;
      position: absolute;
      -webkit-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
      box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
    }
    #wrapper_bottom {
      height: 500px;
      width: 100%;
      min-width: 800px;
      background-size: cover;
      background-position: center top;
      z-index: -1;
      top: 0;
      position: absolute;
      -webkit-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
      box-shadow: inset 0px -4px 15px -2px rgba(0, 0, 0, 0.75);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <header>
      <div id="wrapper_top">
        <div class="nav-container">
          <nav>
            <ul>
              <li class="navigation-bar"><a class="glow" href="index.html">Home</a></li>
              <li class="navigation-bar"><a class="glow" href="About.html">About</a></li>
              <li class="navigation-bar"><a class="glow" href="Cafe.html">Cafe</a></li>
              <li class="navigation-bar"><a class="glow" href="Contact.html">Contact</a></li>
            </ul>
          </nav>
        </div>
        <img src="out_and_up_logo.png" class="logo" style="height: 450px; width: 550px; margin-left: 20px;">
        <div id="wrapper_bottom">
        </div>
      </div>
    </header>

Answer 2

确保在

jquery 文件之后引用脚本.js文件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>