javascript rotating image

esthera · 01-22-2005, 08:14 PM

I am using the following script taken from javascriptsource.com

PHP Code:


			
// Set slideShowSpeed (milliseconds)

var slideShowSpeed = 5000;

// Duration of crossfade (seconds)

var crossFadeDuration = 3;

// Specify the image files

var Pic = new Array();

Pic[0] = 'l85m-4.jpg'

Pic[1] = 'l305-4.jpg'

Pic[2] = '85m-3.jpg'

Pic[1] = 't74-2.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);

}

Any way to make it instead of the slight fade that is happening now to make the pictures come on and off with a better effect. Anyone know of any good scripts? What other filters can I use?

Bobo · 01-22-2005, 09:37 PM

go to msdn.com
--
click "library" at the top
--go to (in the side menu) web development-HTML and CSS-web multimedia-filters and transitions reference-transitions

it will list the transitions
you can put the duration in the play() argument or as an HTML or CSS prop
ex.:
~.play(3)
or
...style="...filter(3)"
....both where 3 is the duration of the filters effect- 3 seconds

esthera · 01-23-2005, 06:41 AM

hi. thanks the link was a great help. I never knew all these options existed.

can you help me -- how would I apply the CheckerBoard filter to the above code instead of the fading in and out?

Bobo · 01-23-2005, 04:21 PM

Change this:
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans ";

To this:
document.images.SlideShow.style.filter+=" progid:dximagetransform.microsoft.CheckerBoard(direction='right',squaresX=8,squaresY=8)";

And change these:

...
document.images.SlideShow.filters.blendTrans.Apply();
...
...
document.images.SlideShow.filters.blendTrans.Play();
...

To these:
...
document.images.SlideShow.filters['dximagetransform.microsoft.checkerboard'].Apply();
...
...
document.images.SlideShow.filters['dximagetransform.microsoft.checkerboard'].Play(2);//2 is the duration
...