Javascript中的图像淡入淡出动画（非JQuery）

我正在尝试制作一个图像库，图像在其中淡入淡出。 它在大多数情况下都能工作，但它会做一件奇怪的事情，循环永远停留在一个元素上，让它做一个奇怪的闪烁。 我觉得逻辑是好的，但我忽略了一些东西，它成功地停止了

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;
}

var d=文档；
var images=新数组（）；
功能旋转（id，延迟）
{
var obj=d.getElementById（id）；
var imageCell=images.length；
images[imageCell]=obj.children；
if（图像[imageCell]。长度<1）
返回0；
var gs=图像[imageCell]。长度；
var srcs=新数组（）；
var-rng=0；
var ln=-1；
var-curImg；
对于（变量i=1；i如果（（parseInt（a）>=parseInt（b）&&distance>=0）| |（parseInt（a）您应该能够从下面的链接获得代码。只需查找swissarmy.js链接：


脚本正在对图像应用IE旧版本的过滤器属性。在其他浏览器上，它使用不透明度属性。以下是了解不透明度的更好链接：

你也可以粘贴一个html示例吗？如果可以的话，最好也有一个。是的，你可以共享JSFIDLE链接吗？我已经开始工作了。更新了OP
<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
    );
}