|
↑
Miscellaneous >>>
This slideshow allows you to browse through the images manually or automatically.
Step 1: Add the below code to the <body> section of your page:
<script
language="javascript"
type="text/javascript">
NewImg
=
new
Array
(
"gecko.jpg",
"lizard.jpg",
"toad.jpg"
);
var
ImgNum =
0;
var
ImgLength =
NewImg.length
-
1;
var
delay =
2000;
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.slideshow.src
=
NewImg[ImgNum];
}
}
function
auto()
{
if
(lock
==
true)
{
lock
=
false;
window.clearInterval(run);
}
else
if
(lock
==
false)
{
lock
=
true;
run
=
setInterval("chgImg(1)",
delay);
}
}
</script>
<center>
<img
src="toad.jpg"
name="slideshow"
width="330"
height="190">
<table>
<tr>
<td
align="right"><a
href="javascript:chgImg(-1)">Previous</a></td>
<td
align="center"><a
href="javascript:auto()">Auto/Stop</a></td>
<td
align="left"><a
href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>
</center>
|
Step 2: The script uses three images as part of its interface. You can create your own, or use the three below (resized for easier download):
(right click images, and select "Save Image As")
Upload them into the same directory as your webpage.
→
|