|
↑
Graphic >>>
Displays images continuously in a slideshow presentation format, with a fade effect on image transitions.
Step 1: Add the below code to the <body> section of your page:
<script
language="javascript"
type="text/javascript">
var
slideShowSpeed =
2000;
var
crossFadeDuration =
3;
var
Pic =
new
Array();
Pic[0]
=
'toad.jpg'
Pic[1]
=
'lizard.jpg'
Pic[2]
=
'chameleon.jpg'
Pic[3]
=
'gecko.jpg'
var
t;
var
j =
0;
var
p =
Pic.length;
var
preLoad =
new
Array();
for
(i
=
0;
i <
p;
i++)
{
preLoad[i]
=
new
Image();
preLoad[i].src
=
Pic[i];
}
function
runSlideShow()
{
if
(document.all)
{
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src
=
preLoad[j].src;
if
(document.all)
{
document.images.SlideShow.filters.blendTrans.Play();
}
j
=
j +
1;
if
(j
>
(p
-
1))
j =
0;
t
=
setTimeout('runSlideShow()',
slideShowSpeed);
}
window.onload=runSlideShow;
</script>
<center>
<table
border="0"
cellpadding="0"
cellspacing="0">
<tr>
<td
id="VU"
height=190
width=330>
<img
src="toad.jpg"
name='SlideShow'
width=330
height=190>
</td>
</tr>
</table>
</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
|