Question

我需要在我的网站的页眉和页脚之间添加一个响应式背景图像，但我还需要它，以便背景图像在每个页面加载时随机变化（从5个不同的图像中选择）。

有关如何实现这一目标的任何帮助？

这是我到目前为止所做的，减去页眉和页脚之间的背景图像。

<body>
  <header style="position: static;">
     <div class="wrapper">
        <div class="logo"><a href="home.html"><img src="images/sh_logo3.png" /></a></div>
        <nav id="nav" role="navigation">
           <a href="#nav" title="Show navigation">Show navigation</a>
           <a href="#" title="Hide navigation">Hide navigation</a>
           <ul>
              <li><a href="home.html" aria-haspopup="true">HOME</a></li>
              <li><a href="shop.html" aria-haspopup="true">SHOP</a></li>
              <li><a href="about.html" aria-haspopup="true">ABOUT</a>
              <li><a href="sizing.html">SIZING</a></li>
              <li><a href="video.html">VIDEO</a></li>
              <li><a href="press.html">PRESS</a></li>
              <li><a href="social.html">SOCIAL</a></li>
              <li><a href="contact.html">CONTACT</a></li>
           </ul>
        </nav>
     </div>
  </header>
  <div class="hero">
     <!-- BACKGROUND IMAGE HERE -->
  </div>
  <div>
     <p style="text-align: center; font-size: 0.9em; font-weight: 400; color: #FAEDE8; letter-spacing: 1px; padding: 2px;">FREE SHIPPPING ON ALL ORDERS</p>
  </div>
  <footer>
     <div class="foot-wrap">
        <div class="foot-list-left">
           <ul>
              <li><a href="privacy.html">PRIVACY POLICY</a></li>
              <li><a href="terms.html">TERMS OF USE</a></li>
              <li><a href="customer.html">CUSTOMER SERVICE</a></li>
              <li><a href="orders.html">ORDERS</a></li>
              <li><a href="returns.html">RETURN POLICY</a></li>
           </ul>
        </div>
        <div class="foot-list-right">
           <ul>
              <li>© 2015 SUMMERHEART</li>
           </ul>
        </div>
     </div>
  </footer>
</body>

任何帮助都将受到重视！

Answer 1

我将创建一个包含每个可能图像的Javascript数组，然后使用Math.random（使用Math.round舍入到整数）在每个页面加载时选择其中一个。使用jQuery将图像附加到'hero'元素的示例：

var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg'];
var randomNumber = Math.round(Math.random() * (images.length - 1));

$('.hero').append('<img src="' + images[randomNumber] + '">');

Math.random方法创建一个随机数（在这种情况下介于0和5之间，但它会根据图像数组的大小进行缩放）。然后，这用于在每次页面加载时随机访问数组中的条目。然后它会附加这个随机选择的图像。

页眉和页脚之间的随机响应背景图像？

1 个答案: