2015-09-24 5 views
1

Мне нужно добавить отзывчивое фоновое изображение между верхним и нижним колонтитулами моего сайта, но мне также нужно иметь его так, чтобы фоновое изображение случайно менялось при каждой загрузке страницы (из 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> 

Любая помощь будет по достоинству оценена!

+0

http://stackoverflow.com/questions/28688925/random-background-image-with-corresponding-attribution-link http://stackoverflow.com/questions/8827691/random-body-background-image http://stackoverflow.com/questions/30854827/javascript-changing-random-background-image-issue - вопрос об ошибке: https://www.google.co.uk/search?q=random+background+image+javascript+stack+ переполнение –

ответ

0

Я хотел бы создать массив Javascript, содержащий все возможные изображения, а затем использовать Math.random (с Math.round для округления до целого числа), чтобы выбрать один из них при каждой загрузке страницы. Пример использования JQuery для добавления изображения к элементу «героя»:

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 в этом случае, но она будет масштаб на основе размера массива изображения). Затем он используется для доступа к записи в массиве случайным образом при каждой загрузке страницы. Затем он добавляет это случайно выбранное изображение.

Смежные вопросы