...

View Full Version : javascript rotating image



esthera
01-22-2005, 08:14 PM
I am using the following script taken from javascriptsource.com



// 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
...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum