Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,464
    Thanks
    15
    Thanked 0 Times in 0 Posts

    javascript rotating image

    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 
    0;
    var 
    Pic.length;
    var 
    preLoad = new Array();
    for (
    0pi++) {
    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();
    }
    1;
    if (
    > (1)) 0;
    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?

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Location
    Port Huron, MI, U.S.A.
    Posts
    280
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Oh, was I supposed to put something here? ........

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,464
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Jan 2004
    Location
    Port Huron, MI, U.S.A.
    Posts
    280
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    ...
    Oh, was I supposed to put something here? ........


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •