javascript - Javascript 中的图像淡入和淡出动画(不是 JQuery)

Question

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

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

编辑:

我明白了。 这是 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
    );
}

Answer 1

您应该能够从下面的链接获取代码。只需查找 swisarmy.js 链接即可:

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

该脚本正在执行的操作是将旧版 IE 的过滤器属性应用于图像。在其他浏览器上它使用不透明度属性。这是了解不透明度的更好链接:

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