[html]
<script type="text/javascript">
all_images = new Array (
"https://i.imgur.com/jFZfedu.gif",
"https://i.imgur.com/j4wYYS4.gif",
"https://i.imgur.com/cZgAnjf.gif",
"https://i.imgur.com/sZACXnG.gif",
"https://i.imgur.com/cXDUD3E.gif",
"https://i.imgur.com/63Tewkw.gif",
"https://i.imgur.com/CNKc7xQ.gif",
"https://i.imgur.com/ybBN7aQ.gif",
"https://i.imgur.com/wGQ8fTS.gif",
"https://i.imgur.com/Q6cnyP0.gif");
var ImgNum = 0;
var ImgLength = all_images.length - 1;
var delay = 2500;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) { ImgNum = 0; }
if (ImgNum < 0) { ImgNum = ImgLength; }
document.slide_show.src = all_images[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
</script>
<div align="center">
<table border="0">
<tr align="center">
<td colspan="3"><img src="image/img_1.png" name="slide_show"></td>
</tr>
<tr align="center">
<td align="right"><a href="javascript:chgImg(-1)">Предыдущая</a></td>
<td align="center"><a href="javascript:auto()">Старт/Стоп</a></td>
<td align="left"><a href="javascript:chgImg(1)">Следующая</a></td>
</tr>
</table>
</div>
<script type="text/javascript">
auto();
</script>
[/html]
<script type="text/javascript">
all_images = new Array (
"image/img_1.png",
"image/img_2.png",
"image/img_3.png",
"image/img_4.png");
var ImgNum = 0;
var ImgLength = all_images.length - 1;
var delay = 2500;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) { ImgNum = 0; }
if (ImgNum < 0) { ImgNum = ImgLength; }
document.slide_show.src = all_images[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
</script>
Далее в том месте Вашей странички, где Вы планируете разместить изображения, которые будут автоматически меняться, добавите следующий код:
<div align="center"> <table border="0"> <tr align="center"> <td colspan="3"><img src="image/img_1.png" name="slide_show"></td> </tr> <tr align="center"> <td align="right"><a href="javascript:chgImg(-1)">Предыдущая</a></td> <td align="center"><a href="javascript:auto()">Старт/Стоп</a></td> <td align="left"><a href="javascript:chgImg(1)">Следующая</a></td> </tr> </table> </div>
После этого остается только запустить ранее описанную функцию смены изображений. Делается это следующим образом:
<script type="text/javascript"> auto(); </script>
- Подпись автора
