Очень часто, пробегая по своим любимым ресурсам, натыкаешься на забавные, а иной раз и весьма полезные вещи. Иногда, это происходит совершенно не преднамеренно. Ищешь или думаешь об одном, встречаешь и находишь другое. Но в копилку складываются, а вдруг, да пригодится.

Уж и не помню, откуда, но по большому счету, данное обстоятельство не имеет особого значения, подобных штучек, а в данном случае речь идет о JavaScript, о заботясь можно нарыть в не мерянном количестве. И даже, нет необходимости гуглить или совершать набег на специфические ресурсы. Любой более или менее приличный новостной портал при внимательном просмотре, даст, как минимум, пищу для размышлений.

Еще раз подчеркну, мое отношение к скриптам, скорее нейтрально и нисколько не напрягает их полное отсутствие. В моей коллекции, нет скриптов монстров. Минимум кода, возможность, методом "научного тыка", подправить его под свои потребности, вот, пожалуй, и все, что нужно.

Многие из посетителей блога, наверняка обратили внимание на блок расположенный в нижнем правом углу header-а, в иные времена он отсвечивал пустотой, там при переходе с одной страницы блога на другую или просто при обновлении страницы, идет смена умных высказываний, афоризмов – назовите, как хотите, не суть то важно.

Реализована данная фишка, в отличие от предлагаемого вам ниже, с помощью php, при полном содействии и одобрении Мастера Lasto, да, что говорить, им и сотворенная по моему не скромному, до сих пор не объяснимому, самому себе, внезапно вспыхнувшему желанию :)

Но об этом в другой раз.

Ладно, довольно лирических отступлений, вернемся к теме заголовка.

Вашему вниманию представляется не большой скрипт, единственной функцией которого является вывод и смена картинок, (текст - не пробовал, но вполне возможно, подойдет и для него) при открытии или обновлении страницы из заранее созданного списка.

Стили несколько строк - оформление блока, в котором будет находиться картинка, задав нужные отступы и поля, а так же border, вы можете придать подложке под картинкой свой стиль. background:url(…) – картинка с которой начнется ваше шоу (можно удалить).

#random {
  background:url(i/bird1.jpg) no-repeat #fff;
  border:#000 1px solid;
  margin:10px auto;
  width:200px;
  height:150px;
}

Все подготовленные вами картинки, должны иметь одинаковые размеры, как по ширине, так и высоте, данные размеры можно и не прописывать.

Скритп - необходимые для настройки параметры выделены цветом.

<script type="text/javascript">
<!-- 
if (document.getElementById) { window.onload = swap };
function swap() {
var numimages=7;
rndimg = new Array("i/bird7.jpg","i/bird6.jpg","i/bird5.jpg","i/bird4.jpg","i/bird3.jpg","i/bird2.jpg","i/bird1.jpg");
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("random").style.backgroundImage = "url("+ randomimage +")";
}
//--> 
</script>

Синий – количество картинок в вашем банке данных.

Зеленый – перечисление картинок с указанием пути к ним.

html – обычный контейнер, располагаете в нужном месте вашей страницы.

<div id="random"></div>

Пример