Script Categories

Graphic >>> Fading Slide Show.

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">
/* Visit for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'toad.jpg'
Pic[1] = 'lizard.jpg'
Pic[2] = 'chameleon.jpg'
Pic[3] = 'gecko.jpg'

// do not edit anything below this line
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) {"blendTrans(duration=2)";"blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
//  End -->
<table border="0" cellpadding="0" cellspacing="0">
id="VU" height=190 width=330>
<img src="toad.jpg" name='SlideShow' width=330 height=190>

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.

JavaScript Editor Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.

Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).