Описание: Недавно меня попросили сделать скрипт галереи со слайд-шоу на 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>
Адреса картинок меняем на свои
И радуемся
Android 8.1.0, Chrome,70.0.3538.110