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

Код JavaScript (вставлять между тегами <head> и </head>):

Код:
<script language = "JavaScript">
  var timer = null;
  var delay = 2000;
  var ar_src = new Array();
  function setBigImageSlide(group) {
    var group = document.getElementById(group);
    var images = group.childNodes;
    var src = new Array();
    var k = 0;
    for (var i = 0; i < images.length; i++) {
      if (images[i] instanceof HTMLImageElement) {
        src[k] = images[i].src;
        k++;
      }
    }
    ar_src = src;
    if (timer != null) clearTimeout(timer);
    imagesSlide(0);
  }
  function imagesSlide(i) {
    var image = document.getElementById("bigimgslide");
    image.src = ar_src[i];
    i++;
    if (i == ar_src.length) i = 0;
    timer = setTimeout("imagesSlide(" + i + ")", delay);
  }
</script>

Код HTML (вставлять между тегами <body> и </body>):

Код:
<div>
  <p style = 'text-align: center;'>
    <img id='bigimgslide' src='images/javascript/space_1.jpg' height='150' alt='Главное изображение' />
  </p>
  <table style = 'margin: 0 auto;' border = '1'>
    <tr>
      <td>
        <img src = 'images/javascript/space_1.jpg' width = '100' onclick = 'setBigImageSlide("space")' alt = 'Изображение 1' />
        <div id="space">
          <img src = 'images/javascript/space_1.jpg' width = '100' style="display: none;" alt = 'Изображение 1a' />
          <img src = 'images/javascript/space_2.jpg' width = '100' style="display: none;" alt = 'Изображение 1b' />
          <img src = 'images/javascript/space_3.jpg' width = '100' style="display: none;" alt = 'Изображение 1c' />
        </div>
      </td>
      <td>
        <img src='images/javascript/flower_1.jpg' width='100' onclick='setBigImageSlide("flowers")' alt='Изображение 2' />
        <div id="flowers">
          <img src='images/javascript/flower_1.jpg' width='100' style="display: none;" alt='Изображение 2a' />
          <img src='images/javascript/flower_2.jpg' width='100' style="display: none;" alt='Изображение 2b' />
          <img src='images/javascript/flower_3.jpg' width='100' style="display: none;" alt='Изображение 2c' />
        </div>
      </td>
      <td>
          <img src='images/javascript/animal_1.jpg' width='100' onclick='setBigImageSlide("animals")' alt='Изображение 3' />
        <div id="animals">
          <img src='images/javascript/animal_1.jpg' width='100' style="display: none;" alt='Изображение 3a' />
          <img src='images/javascript/animal_2.jpg' width='100' style="display: none;" alt='Изображение 3b' />
          <img src='images/javascript/animal_3.jpg' width='100' style="display: none;" alt='Изображение 3c' />
        </div>
      </td>
    </tr>
  </table>
</div>

Адреса картинок меняем на свои http://www.kolobok.us/smiles/standart/blum2.gif
И радуемся http://www.kolobok.us/smiles/standart/boast.gif


Android 8.1.0, Chrome,70.0.3538.110