БлогNot. Javascript: ещё одна смена картинки по таймауту...

Javascript: ещё одна смена картинки по таймауту...

Допустим, каждые timeOut секунд требуется менять картинку на web-странице, а под картинкой показывать маленький динамический счётчик оставшихся секунд. При этом хотелось бы иметь функцию-замыкание, независимую от других частей кода.

Также предполагаем, что файлов с картинками достаточно много, но размер каждого из них невелик, так что едва ли имеет смысл делать предзагрузку изображений, юзер всё равно увидит далеко не все файлы. Будем полагаться на достаточную скорость инета и не слишком маленький интервал обновления картинки :)

Чтобы при загрузке новых картинок с удалённого адреса макет не "скакал", укажем разделу с картинкой ширину и высоту, соответствующие размерам загружаемых изображений.

Ниже показано соответствующее решение в работе и кодом (без обрамления HTML). Правда, ничего лучше, чем рожи одухотворённые портреты участников КМ-2019 по шахматам я под рукой не нашёл, а картинки немного не выровнены, поскольку представляют собой сделанную автоматически в Фотошопе "нарезку".

<div id="rndImage" style="margin:0 auto;width: 250px;height: 335px;"></div>
<div id="imgTimer" style="margin:0 auto;width: 250px;text-align:center;font-size:10px;"></div>
<script>
var randomImage = function (timeOut, secs) {
 if (secs<1) {
  secs = timeOut;
  var url = 'http://blog.kislenko.net/archives/wc2019'; //общая часть URL всех картинок, без "/" в конце
  var imgArray = [ //имена картинок
   '001.jpg', '002.jpg', '003.jpg', '004.jpg', '005.jpg', '006.jpg', '007.jpg', '008.jpg',
   '009.jpg', '010.jpg', '011.jpg', '012.jpg', '013.jpg', '014.jpg', '015.jpg', '016.jpg',
   '017.jpg', '018.jpg', '019.jpg', '020.jpg', '021.jpg', '022.jpg', '023.jpg', '024.jpg',
   '025.jpg', '026.jpg', '027.jpg', '028.jpg', '029.jpg', '030.jpg', '031.jpg', '032.jpg',
   '033.jpg', '034.jpg', '035.jpg', '036.jpg', '037.jpg', '038.jpg', '039.jpg', '040.jpg',
   '041.jpg', '042.jpg', '043.jpg', '044.jpg', '045.jpg', '046.jpg', '047.jpg', '048.jpg',
   '049.jpg', '050.jpg', '051.jpg', '052.jpg', '053.jpg', '054.jpg', '055.jpg', '056.jpg',
   '057.jpg', '058.jpg', '059.jpg', '060.jpg', '061.jpg', '062.jpg', '063.jpg', '064.jpg',
   '065.jpg', '066.jpg', '067.jpg', '068.jpg', '069.jpg', '070.jpg', '071.jpg', '072.jpg',
   '073.jpg', '074.jpg', '075.jpg', '076.jpg', '077.jpg', '078.jpg', '079.jpg', '080.jpg',
   '081.jpg', '082.jpg', '083.jpg', '084.jpg', '085.jpg', '086.jpg', '087.jpg', '088.jpg',
   '089.jpg', '090.jpg', '091.jpg', '092.jpg', '093.jpg', '094.jpg', '095.jpg', '096.jpg',
   '097.jpg', '098.jpg', '099.jpg', '100.jpg', '101.jpg', '102.jpg', '103.jpg', '104.jpg',
   '105.jpg', '106.jpg', '107.jpg', '108.jpg', '109.jpg', '110.jpg', '111.jpg', '112.jpg',
   '113.jpg', '114.jpg', '115.jpg', '116.jpg', '117.jpg', '118.jpg', '119.jpg', '120.jpg',
   '121.jpg', '122.jpg', '123.jpg', '124.jpg', '125.jpg', '126.jpg', '127.jpg', '128.jpg'
  ];
  var num = Math.floor( Math.random() * imgArray.length);
  var img = imgArray [num];
  document.getElementById("rndImage").innerHTML = ('<img src="' + url + '/' + img + '" alt="rndImage"/>');
 }
 document.getElementById("imgTimer").innerHTML = secs;
 window.setTimeout ('randomImage('+timeOut+','+(--secs)+')',1000); 
};

window.addEventListener('load', function (e) { 
 var timeOut = 3; //раз в 3 сек. менять картинку
 randomImage (timeOut, 0);
}, false);  
</script>
<noscript>
 <p>Извините, для работы приложения нужно включить Javascript в браузере</p>
</noscript>

Чтобы получить список однотипных 128 имён файлов, я, конечно, не вводил их имена вручную, а выполнил на локальном хосте следующий маленький скрипт на PHP:

<?php
 for ($i=1; $i<129; $i++) { //номера файлов
  $s = sprintf("%03d.jpg",$i); //имя вида "000.jpg"
  echo "'".$s."', "; //вывод списка
  if (!($i%8)) echo '<br>'; //перевод строки раз за 8 шагов
 }
?>

Можно было для таких имён вообще не хранить в массиве названия файлов, а только их количество (номер последнего файла).

25.09.2019, 14:45 [1492 просмотра]


теги: javascript картинка список random php шахматы время

К этой статье пока нет комментариев, Ваш будет первым