Image Fade In and Fade Out animation in Javascript (Not JQuery)

问题

I'm trying to make an Image gallery where the images fade in and out. it works for the most part, but it does this weird thing where the loops linger on an element forever making it do a weird flashing. I feel the logic is fine, but there is something I am overlooking for it to successfully stop.

var d = document;
var images = new Array();
function rotate(id,delay)
{
    var obj = d.getElementById(id);
    var imageCell = images.length;
    images[imageCell] = obj.children;
    if(images[imageCell].length < 1)
        return 0;
    var gs = images[imageCell].length;
    var srcs = new Array();
    var rng = 0;
    var ln = -1;
    var curImg;
    for(var i = 1; i < gs; i++)
    {
            images[imageCell][i].style.opacity=0;
    }
    fadeOut(obj,curImg,imageCell,rng,ln,gs,delay);
}
function fadeOut(obj,curImg,imageCell,rng,ln,gs,delay)
{
    setTimeout
    (
        function()
        {
            devanimate(images[imageCell][rng],"opacity",250,1,0);
            ln = rng;
            do
            {
                rng = Math.floor(Math.random() * gs);
            }while(ln == rng);
            nextImage(obj,curImg,imageCell,rng,ln,gs,delay);
        },
        delay
    );
}
function nextImage(obj,curImg,imageCell,rng,ln,gs,delay)
{
            images[imageCell][rng].style.left= (obj.clientWidth/2 - images[imageCell][rng].clientWidth/2)+"px";             
            devanimate(images[imageCell][rng],"opacity",250,0,1);
            fadeOut(obj,curImg,imageCell,rng,ln,gs,delay);
}
function devanimate(obj,cssStyle,time,a,b)
{
    if(typeof obj === 'undefined') return;
    var frame = 24;
    var second = 1000;
    var fps = (second/frame);
    var distance = parseInt(b) - parseInt(a);
    var rate = ((distance/frame)*second)/time;
    setTimeout
    (
        function()
        {
            a += rate;
                    obj.style.opacity=a;
            newTime = time-fps;
            devanimate(obj,cssStyle,newTime,a,b);
        }
        ,fps
    );
    if((parseInt(a) >= parseInt(b) && distance >= 0) || (parseInt(a) <= parseInt(b) && distance < 0))
        obj.style.opacity=b;
    return;
}

EDIT:

I figured it out. Here is the working code with HTML.

<div id="fpImage" class="border gallery" style="padding:0px;">
    <img src="images/g20.jpg" alt=""/>
    <img src="images/g1.jpg" alt=""/>
    <img src="images/g2.jpg" alt=""/>
    <img src="images/g3.jpg" alt=""/>
    <img src="images/g4.jpg" alt=""/>
    <img src="images/g5.jpg" alt=""/>
    <img src="images/g6.jpg" alt=""/>
    <img src="images/g7.jpg" alt=""/>
    <img src="images/g8.jpg" alt=""/>
    <img src="images/g9.jpg" alt=""/>
    <img src="images/g10.jpg" alt=""/>
    <img src="images/g11.jpg" alt=""/>
    <img src="images/g12.jpg" alt=""/>
    <img src="images/g13.jpg" alt=""/>
    <img src="images/g14.jpg" alt=""/>
    <img src="images/g15.jpg" alt=""/>
    <img src="images/g16.jpg" alt=""/>
    <img src="images/g18.jpg" alt=""/>
    <img src="images/g19.jpg" alt=""/>
    <img src="images/g17.jpg" alt=""/>
</div>
<script type="text/javascript">
    rotate("fpImage",3000);
</script>

var d = document;
var images = new Array();//Set Array so you can have multiple galleries on a page at a time
function rotate(id,delay)
{
    var obj = d.getElementById(id);
    var imageCell = images.length;
    images[imageCell] = obj.children;//set specific gallery into images array
    if(images[imageCell].length < 1)
        return 0;
    var gs = images[imageCell].length;
    var rng = 0;//Initialize rng
    var ln = -1;//initialize Last Number. This is used so the rng doesn't bring hte same number twice in a row
    setTimeout//This set Timeout centers each image horizontally.
    (
        function()
        {
            for(var i = 0; i < gs; i++)
                images[imageCell][i].style.left= (obj.clientWidth/2 - images[imageCell][i].clientWidth/2)+"px";
        },delay
    );
    for(var i = 1; i < gs; i++)//this makes all the images initially 100% transparent
    {
        images[imageCell][i].style.opacity=0;
        images[imageCell][i].style.filter='alpha(opacity=0)';
    }
    nextImage(imageCell,rng,ln,gs,delay);
}
function nextImage(imageCell,rng,ln,gs,delay)
{
    setTimeout
    (
        function()
        {
            devanimate(images[imageCell][rng],250,100,0);//Fade out current image
            ln = rng;//Remember previous RNG Number
            do
            {
                rng = Math.floor(Math.random() * gs);//
            }while(ln == rng);//Loop until new RNG Number is found
            devanimate(images[imageCell][rng],250,0,100);//Fade in new image
            nextImage(imageCell,rng,ln,gs,delay);//call this function again
        },
        delay
    );
}
function devanimate(obj,time,a,b)
{
    var frame = 30;//FPS Rate, so this is currently set to 30 fps
    var second = 1000;
    var fps = (second/frame);
    var distance = parseInt(b) - parseInt(a);
    var rate = ((distance/frame)*second)/time;
    setTimeout
    (
        function()
        {
            a += rate;
            obj.style.opacity=(a/100);
            obj.style.filter='alpha(opacity='+a+')';
            newTime = time-fps;
            if((parseInt(a) >= parseInt(b) && distance >= 0) || (parseInt(a) <= parseInt(b) && distance < 0))
            {
                obj.style.opacity=(b/100);
                obj.style.filter='alpha(opacity='+b+')';
            }
            else
                devanimate(obj,newTime,a,b);
        }
        ,fps
    );
}

回答1:

You should be able to get the code from the link below. Just look for the swissarmy.js link:

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

What the script is doing is applying a the filter attribute for older versions of IE to the images. On other browsers its using the opacity attribute. Here is a better link for understanding opacity:

http://www.scriptiny.com/2011/01/javascript-fade-in-out/

来源：https://stackoverflow.com/questions/22890153/image-fade-in-and-fade-out-animation-in-javascript-not-jquery