Доброго времени суток, уважаемые читатели блога Мои тараканы!

Бекграунд для сайта.

Недавно передо мной возникла задача: придумать что-то, чтобы при каждой перезагрузке страницы, каждый раз загружался новый background страницы.

На каком-то форуме нашел такой скрипт:

var bgPath = '/img/bg';
var imagesNumber = 3;
var rndBg = Math.floor(Math.random() * imagesNumber);
document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';

К скрипту прилагались объяснения, но человек, который обратился за помощью так и не смог в них разобраться.

Я решил испробовать данный скрипт. Вставил всё по существующей инструкции, но и у меня тоже он, почему-то не сработал.

Немного повозился и... О чудо — всё работает!

Давайте вместе разберём этот код, в чем же была причина?

Первое: Данный скрипт нужно вставить после открывающего тега body.
Второе: Путь к изображениям. В шаблоне сайта я создал папку "background" и туда поместил изображения, которые должны рондомно (случайно, каждый раз другое) меняться при каждой перезагрузке страницы. Вы можете назвать эту папку как угодно. Или же совсем не создавать, а запихнуть файлы в уже существующую папку. Главное правильно указать путь к ним (лучше всего указать абсолютный путь).
Третье: Имя файла. В скрипте указано имя файла bg. Давайте и мы назовём свои беграунды bg0, bg1, bg2. Путь к изображению будет формироваться следующим образом: (+ bgPath + rndBg + '.jpg) — путь к картинке/bg (её название (без номера)) + номер картинки + расширение.
Последнее: var imagesNumber = 3 — 3 — это количество background'ов отображаемых в ротации. Если вы укажете число большее, чем число имеющихся у вас картинок — может проскочить «пустой» задний фон.

Пример:

<script type="text/javascript">;
var bgPath = 'http://ваш_сайт/templates/ваш_шаблон/images/backgrounds/bg'<!-- путь к изображениям (На WordPress путь может выглядеть так http://ваш_сайт/wp-content/temes/ваш_шаблон/images/backgrounds/bg)-->
var imagesNumber = 3;<!-- количество отображаемых изображений -->
var rndBg = Math.floor(Math.random() * imagesNumber);
document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';
</script>

Для того чтобы фоновое изображение растягивалось на всю ширину экрана и не прокручивалось с остальным контентом в файл CSS следующий код:

body {
 background: fixed;
 -moz-background-size: 100%; /* Firefox 3.6+ */
 -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
 -o-background-size: 100%; /* Opera 9.6+ */
 background-size: 100%; /* Современные браузеры */}

Не нужно заменять все атрибуты тега body. Измените только нужные значения атрибута background.

Кстати, возможен другой вариант этой фишки:

var bgFolder = 'img/';
var backgrounds = [
  'bg0.jpg',
  'bg1.jpg',
  'bg2.jpg',
  'bg3.jpg',
  'bg4.jpg'
];
var rndBg = Math.floor(Math.random() * 5);
document.body.style.backgroundImage = 'url(' + bgFolder + backgrounds[rndBg] + ')';

Ну, теперь, я думаю, с этим скриптом вы разберётесь сами. Ну, если нет — смотрите инструкции к предыдущему скрипту — своего рода задачка на логику.

Кстати, если пошёл разговор о задачах на логику — вот вам ещё одна:

Задача на логику

Дошкольники решают эту задачу за 5-10 минут. У некоторых программистов уходит на неё до часа.
Но многие люди, исписав несколько листов бумаги, сдаются.


На этом всё. Вопросы в комментариях. Подписывайтесь на обновления блога в Twitter , RSS или по почте!

С уважением, Мышак Пётр!

Похожие записи:

Понравилась статья? Расскажи друзьям, автор очень старался:
2 комментария на:
“Скрипт для рондомного отображения бекграунда — разбор полетов”
  • Сергей говорит:

    Ура, я решил задачку, значит я не тупее дошкольника 😉

  • Андрей говорит:

    Молодец, Сергей! Я тоже решил ))

    Скрипт хороший, рабочий... Спасибо!

Добавить комментарий

Перед комментированием ознакомтесь с правилами комментирования
  • Все комментарии проходят ручнуюю модерацию, поэтому большая прозьба - НЕ СПАМИТЬ!!!
  • Подписывайтесь нормальными именами, а не "регистрация в Москве" или "Кондиционеры не дорого".
  • Ссылки на коммерческие сайты будут удалятся.
  • Оставляйте ссылку на главную страницу.
  • Оставляйте комментарии длинной не менее 100 символов. Исключения - диалоги и ответы на заданные вопросы.
Внимание! Один раз в неделю блог прходит проверку на наличие битых ссылок. Если ваш сайт в это время не был доступен, ссылка на него будет удалена!
За собой оставляю право редактировать и удалять комментарии, даже если они удовлетворяют вышепреведённый свод правил.