|
↑
Graphic >>>
Rotates a series of images in a page as a slideshow. You can customize the images and the time between each image. This script works best if all the images are the same dimension!
Step 1: Add the below code to the <body> section of your page:
<script
language="javascript"
type="text/javascript">
var
rotate_delay =
5000;
current
=
0;
function
next()
{
if
(document.slideform.slide[current+1])
{
document.images.show.src
=
document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex
=
++current;
}
else
first();
}
function
previous()
{
if
(current-1
>=
0)
{
document.images.show.src
=
document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex
=
--current;
}
else
last();
}
function
first()
{
current
=
0;
document.images.show.src
=
document.slideform.slide[0].value;
document.slideform.slide.selectedIndex
=
0;
}
function
last()
{
current
=
document.slideform.slide.length-1;
document.images.show.src
=
document.slideform.slide[current].value;
document.slideform.slide.selectedIndex
=
current;
}
function
ap(text)
{
document.slideform.slidebutton.value
=
(text
==
"Stop")
?
"Start"
:
"Stop";
rotate();
}
function
change()
{
current
=
document.slideform.slide.selectedIndex;
document.images.show.src
=
document.slideform.slide[current].value;
}
function
rotate()
{
if
(document.slideform.slidebutton.value
==
"Stop")
{
current
=
(current
==
document.slideform.slide.length-1)
?
0
:
current+1;
document.images.show.src
=
document.slideform.slide[current].value;
document.slideform.slide.selectedIndex
=
current;
window.setTimeout("rotate()",
rotate_delay);
}
}
</script>
<center>
<form
name=slideform>
<table
cellspacing=1
cellpadding=4
bgcolor="#000000">
<tr>
<td
align=center
Background=../graphics/grayback.jpg>
<b>Image
Slideshow</b>
</td>
</tr>
<tr>
<td
align=center>
<img
src="toad.jpg"
name="show"
width=330
height=190>
</td>
</tr>
<tr>
<td
align=center
bgcolor="#C0C0C0">
<select
name="slide"
onChange="change();">
<option
value="toad.jpg"
selected>Toad
<option
value="chameleon.jpg">Chameleon
<option
value="lizard.jpg">Lizard
<option
value="Gecko.jpg">Gecko
</select>
</td>
</tr>
<tr>
<td
align=center
bgcolor="#C0C0C0">
<input
type=button
onClick="first();"
value="|<<"
title="Beginning">
<input
type=button
onClick="previous();"
value="<<"
title="Previous">
<input
type=button
name="slidebutton"
onClick="ap(this.value);"
value="Start"
title="AutoPlay">
<input
type=button
onClick="next();"
value=">>"
title="Next">
<input
type=button
onClick="last();"
value=">>|"
title="End">
</td>
</tr>
</table>
</form>
</center>
|
Step 2: The script uses 4 images as part of its interface. You can create your own, or use the 4 below (resized for easier download):
(right click images, and select "Save Image As")
Upload them into the same directory as your webpage.
→ NCEdCloud - My.NcedCloud.org IAM Service - NCEDCloud Login
|
