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