1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Javascript image rotator

Discussion in 'Other Languages' started by freeufcdotinfo, Apr 23, 2013.

  1. freeufcdotinfo

    freeufcdotinfo Power Member

    Joined:
    Jun 12, 2008
    Messages:
    685
    Likes Received:
    155
    I have a script that rotates several images, but I need them to fade, does anyone know how to do this.
     
  2. nocare

    nocare Junior Member

    Joined:
    Apr 29, 2013
    Messages:
    164
    Likes Received:
    81
    Location:
    Deep Code
    Two ways for ya, assume this is a "rotator" meaning image A appears, then B, then C, etc.

    The older method I learned way back:

    Loop over and change the opacity until one is zero, and one is 100, using a timer with an interval.
    You then increment and decrement. If your simply replacing the image url, you'll need to do this differently, but shouldn't be too complex.
    Code:
    var curImage = document.getElementBuId('imageCurrent');
    var nexImage = document.getElementBuId('imageNext');
    var timeIncrement=50;
    var fadeIncrement=5;
    var timer = setInterval( function()
        {
                curImage.style.opacity = curImage.style.opacity - fadeIncrement;
                nexImage.style.opacity = nexImage.style.opacity + fadeIncrement;
        }, timeIncrement );
    
    
    You'll need to terminate the timer when the values reach 0 and 100%, but I can't remember how to in javascript offhand.

    Another option is to just use jQuery's .fade() function, which is quite handy and stupid easy to use :D
     
    Last edited: Apr 29, 2013
  3. gregevskye

    gregevskye BANNED BANNED Jr. VIP Premium Member

    Joined:
    Jul 15, 2013
    Messages:
    309
    Likes Received:
    36
    Most like CSS opacity is used for fade between 0 to 1. You can select opacity level according to your desire either 0.2, 0.5 or whatever. In javascript declare the image as variable and then using DOM method access the image and use stye.opacity code.