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

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 个解决方案

解决方案1
0 2015-09-24 18:00:38

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

问题描述

1 个解决方案

解决方案1 0 2015-09-24 18:00:38

解决方案1
0 2015-09-24 18:00:38