/*
  Transition Effects Script by WBS (c) 2004
 
  Title:        Transition Effects for Internet Explorer 5.5
  File:         WbsTrans.js
  Version:      1.0
  Author:       WBS
  Date created: November 12, 2004
  Last update:  December 20, 2004
*/
 
/*
-------------------------------------------------------------------
  public void createTrans(Image img, int delay, bool randomImages, bool randomFilter, int timeShift)
 
  img - An image element defined using <img> tag that will participate in transitions.
  imgArray - An array containing images.
  delay - Time in miliseconds between transitions.
  randomImages - Determines if the next image will be selected randomly. There is a special
      mechanism preventing from selecting the same image two time in a row.
  randomFilter - Determines if the filter will be selected randowmly.
  timeShift - Initial delay in milisecond to launch transitions.
-------------------------------------------------------------------
*/ 
function createTrans(img, imgArray, delay, randomImages, randomFilter, timeShift)
{
    // Initialize a global variable 'errors' to keep any error messages that may occur.
    if (typeof(window['errors'])=='undefined')
        window['errors'] = '';
 
    // A local variable to keep error messages.
    var errors = window['errors'];
 
    // If there are any error messages the createTrans() function terminates.
    if (errors!='') return;
 
    // Test if the imgArray array has been initialized.
    if (imgArray.length<1)
        errors += '- Transition effects require at least one image. ' +
            'Please initialize the "' + imgArray.name + '" array.\n';
 
    // Test if the 'transFilters' array has been defined and initialized.
    if (typeof(window['transFilters'])=='undefined')
        errors += '- Please define the "transFilters" array.\n';
    else
    {
        if (transFilters.length<1)
            errors += '- Transition effects require at least one filter. ' + 
                'Please initialize the "transFilters" array.\n';
    }
 
    if (errors!='')
    {
        // If any errors occured show them to users.
        alert('Transition effects cannot be created.\n'+errors);
        window['errors'] = errors;
    }
    else
    {
        // If there are no errors create a global variable that keeps an object of the Trans class.
        // The name of the variable is the same as the image element.
        var name = img.id;
        window[name] = new Trans(img, imgArray, randomImages, randomFilter);
 
        // Launch transition taking into account the initial delay.
        if (timeShift==0)
        {
            setInterval('doTrans(window["'+name+'"])', delay);
        }
        else
        {
            setTimeout('setInterval(\'doTrans(window["'+name+'"])\', '+delay+')', timeShift);
        }
    }
}
 
/*
-------------------------------------------------------------------
  private class Trans
  constructor: Trans(Image img, Array imgArray, bool randomImages, bool randomFilter )
 
  img - An image element defined using <img> tag that will participate in transitions.
  randomImages - Determines if the next image will be selected randomly. There is a special
      mechanism preventing from selecting the same image two time in a row.
  randomFilter - Determines if the filter will be selected randowmly.
-------------------------------------------------------------------
*/
function Trans(img, imgArray, randomImages, randomFilter )
{
	this.imgArray = imgArray;
    this.randomImages = randomImages;
 
    // Determine if the filters are supported.
    this.isIE55 = qualifyBrowser(5.5);
 
    // Determine which image to show.
    if ( this.randomImages )
    {
        this.currImage = getRandom(imgArray.length)-1;
    }
    else
    {
        this.currImage = 0;
    }
 
    // Load image file to the <img> tag.
    this.img = img;
    this.img.src = this.imgArray[this.currImage];
 
    // Determine the next image.
    var nextImage = getNext( this.currImage, this.randomImages, this.imgArray.length, true );
 
    // Preload the next image.
    this.objImg = new Image();
    this.objImg.src = this.imgArray[nextImage];
 
    // Assign next image as the current image.
    this.currImage = nextImage;
 
    // Test if the browser is Internet Explorer 5.5 or up.
    if ( this.isIE55 )
    {
        // Save the randomFilter flag.
        this.randomFilter = randomFilter;
 
        // Assign filters to the "img" element.
        var filter = '';
        for(i=0; i<transFilters.length; i++)
        {
            filter += transFilters[i]+' ';
        }
        this.img.style.filter = filter;
        this.numFilter = transFilters.length;
 
        // Initialize filter.
        if ( this.randomFilter )
            this.currFilter = getRandom(this.numFilter)-1;
        else
            this.currFilter = 0;
    }
}
 
/*
-------------------------------------------------------------------
  private void doTrans(Trans trans)
 
  The doTrans() method is called each time a transition needs to be done.
-------------------------------------------------------------------
*/
function doTrans(trans)
{
    if ( trans.isIE55 )
    {
        // Determine the filter.
        trans.currFilter = getNext( trans.currFilter, trans.randomFilter, trans.numFilter, false )
 
        // Apply filter and change image.
        trans.img.filters[trans.currFilter].apply();
        trans.img.src = trans.objImg.src;
        trans.img.filters[trans.currFilter].play();
    }
    else
    {
        // Just assign next image if the browser does not support transitions.
        trans.img.src = trans.objImg.src;
    }
 
    // Determine the next image.
    trans.currImage = getNext( trans.currImage, trans.randomImages, trans.imgArray.length, true );
 
    // Preload the next image.
    trans.objImg = new Image();
    trans.objImg.src = trans.imgArray[trans.currImage];
}
 
/*
-------------------------------------------------------------------
  private int getRandom(int max)
 
  Utility function. Returns a random number between 1 and "max" included.
-------------------------------------------------------------------
*/
function getRandom(max)
{
    var num = Math.round( Math.random()*(max-1) )+1;
    return num;
}
 
/*
-------------------------------------------------------------------
  private int getNext(int currValue, bool isRandom, int max, bool isDifferent)
 
  Utility function. Returns another number between 0 and "max" excluded.
-------------------------------------------------------------------
*/
function getNext(currValue, isRandom, max, isDifferent)
{
    var nextValue = currValue;
    if ( isRandom )
    {
        if (isDifferent)
        {
            var tmp = getRandom(max)-1;
            if (tmp == currValue)
                nextValue++;
            else
                nextValue = tmp;
        }
        else
        {
            nextValue = getRandom(max)-1;
        }
    }
    else
    {
        nextValue++;
    }
    if ( nextValue == max ) nextValue=0;
 
    return nextValue;
}
 
/*
-------------------------------------------------------------------
  The next two methods are taken form "JavaScript Bible" by Danny Goodman.
  They determine what version of IE is being used.
-------------------------------------------------------------------
*/
function getIEVersion(ua)
{
    var IEOffset = ua.indexOf('MSIE ');
    return parseFloat( ua.substring(IEOffset + 5, ua.indexOf(';', IEOffset)) );
}
function qualifyBrowser(qualifiedVersion)
{
    var ua = navigator.userAgent;
    var ret = false;
    if (navigator.appName == 'Microsoft Internet Explorer')
    {
        if (parseInt(getIEVersion(ua)) >= qualifiedVersion )
        {
            if (ua.indexOf('Windows') != -1)
            {
                ret = true;
            }
        }
    }
    return ret;
}

Test.htm:

<html>
<head>
    <title>Transitions</title>
 
    <script language="javascript" type="text/javascript">
        // (1) Declare the transImages array containing images for transitions (at least one).
        var transImages = new Array('001.jpg','002.jpg','003.jpg','004.jpg','005.jpg','006.jpg','007.jpg');
 
        // (2) Declare the transFilters array containing filters (at least one).
        var transFilters = new Array('progid:DXImageTransform.Microsoft.Blinds(Bands=4,direction=up)',
        'progid:DXImageTransform.Microsoft.Checkerboard(Direction=right,SquaresX=8,SquaresY=6)',
        'progid:DXImageTransform.Microsoft.Fade(Overlap=1.00)',
        'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward)',
        'progid:DXImageTransform.Microsoft.Inset()',
        'progid:DXImageTransform.Microsoft.Iris(irisstyle=STAR,motion=out)',
        'progid:DXImageTransform.Microsoft.Iris(irisstyle=PLUS,motion=out)',
        'progid:DXImageTransform.Microsoft.Iris(irisstyle=CROSS,motion=out)',
        'progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=CLOCK)',
        'progid:DXImageTransform.Microsoft.RandomBars()',
        'progid:DXImageTransform.Microsoft.RandomDissolve()',
        'progid:DXImageTransform.Microsoft.Slide(slidestyle=HIDE,Bands=1)',
        'progid:DXImageTransform.Microsoft.Slide(slidestyle=HIDE,Bands=5)',
        'progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1)',
        'progid:DXImageTransform.Microsoft.Slide(slidestyle=SWAP,Bands=1)',
        'progid:DXImageTransform.Microsoft.Spiral(GridSizeX=8,GridSizeY=8)',
        'progid:DXImageTransform.Microsoft.Stretch(stretchstyle=PUSH)',
        'progid:DXImageTransform.Microsoft.Strips(motion=leftdown)',
        'progid:DXImageTransform.Microsoft.Wheel(spokes=6)',
        'progid:DXImageTransform.Microsoft.Zigzag(GridSizeX=8,GridSizeY=8)');
    </script>
 
    <!-- (3) Attach the WbsTrans.js file -->
    <script language="javascript" type="text/javascript" src="WbsTrans.js"></script>
</head>
 
<!-- (4) Invoke createTrans() function in any place, for example 
    in the onLoad() event handler of the <body> tag -->
<body onload="createTrans(imgFirst, transImages, 2000, false, true, 0); 
    createTrans(imgSecond, transImages, 2000, true, false, 1000);">
 
    <!-- (5) Place the <img> tags on the page. These images are referenced by createTrans(). -->
    <img id="imgFirst" alt="first image">
    <img id="imgSecond" alt="second image">
</body>
 
</html>

Sample images: