Автоматическая смена изображений (слайдшоу)
http://usefulscript.ru/slide_show.phpДля тех, кто хочет показать посетителям своего сайта много различных изображений, но не хочетпри этом занимать изображениями весь экран, предлагаем воспользоваться скриптом автоматической смены изображений.
Пример работы скрипта автоматической смены изображений Вы можете наблюдать чуть ниже.
Для того, чтобы получить на своем сайте такое слайдшоу, вставьте в начало Вашей странички следующий JavaScript код:
<
scripttype
=
"text/javascript"
>
all_images
=newArray(
"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
);
}
elseif(
lock
==
false
){
lock
=
true
;
run
=
setInterval
(
"chgImg(1)"
,
delay
);
}
}
Далее в том месте Вашей странички, где Вы планируете разместить изображения,которые будут автоматически меняться, добавите следующий код:
<
divalign
=
"center"
>
<
tableborder
=
"0"
>
<
tralign
=
"center"
>
<
tdcolspan
=
"3"
><
imgsrc
=
"image/img_1.png"
name
=
"slide_show"
>
td
>
tr
>
<
tralign
=
"center"
>
<
tdalign
=
"right"
><
ahref
=
"javascript:chgImg(-1)"
>
Предыдущая
a
>
td
>
<
tdalign
=
"center"
><
ahref
=
"javascript:auto()"
>
Старт
/
Стоп
a
>
td
>
<
tdalign
=
"left"
><
ahref
=
"javascript:chgImg(1)"
>
Следующая
a
>
td
>
tr
>
table
>
div
>
После этого остается только запустить ранее описанную функцию смены изображений.Делается это следующим образом:
<
scripttype
=
"text/javascript"
>
auto
();
В результате добавления описанного JavaScript кода на свой сайт Вы получите слайдшоуиз указанных Вами картинок (как в приведенном выше примере).
…