Question

我有一个包含三组图像的HTML页面。我希望每组中的每个图像保持可见状态5秒钟，然后一起淡出，当所有三个图像都不可见时，一起淡入。然后该过程再次开始。我试图不使用JQuery这样做。我写了一个JavaScript来做这件事，它有效，但过了一会儿奇怪的事情发生了。图像停止淡出，进入或过早地淡出。这是相关的HTML：

<body onload="HideAll(fade1Image2, fade1Image3, fade1Image4, fade2Image2,
fade2Image3, fade2Image4, fade3Image2, fade3Image3, fade3Image4); 
SetVariables(4,4,4);">

<div id="fade1Image1" style="position:absolute;top:0px;left:312px;">
    <img src="Images/Home/Power_Station/PowerStation1.jpg" alt="Power Station 1" />
</div>
<div id="fade1Image2" style="position:absolute;top:0px;left:312px;">
    <img src="Images/Home/Power_Station/PowerStation2.jpg" alt="Power Station 2" />
</div>
<div id="fade1Image3" style="position:absolute;top:0px;left:312px;">
    <img src="Images/Home/Power_Station/FenceLine1.jpg" alt="Fence Line 1" />
</div>
<div id="fade1Image4" style="position:absolute;top:0px;left:312px;">
    <img src="Images/Home/Power_Station/FenceLine2.jpg" alt="Fence Line 2" />
</div>

<div id="fade2Image1" style="position:absolute;top:208px;left:0px;">
    <img src="Images/Home/LNG_Terminal_Set/LNGTerminal1.jpg" alt="LNG Terminal 1" />
</div>
<div id="fade2Image2" style="position:absolute;top:208px;left:0px;">
    <img src="Images/Home/LNG_Terminal_Set/LNGTerminal2.jpg" alt="LNG Terminal 2" />
</div>
<div id="fade2Image3" style="position:absolute;top:208px;left:0px;">
    <img src="Images/Home/LNG_Terminal_Set/LNGTerminal3.jpg" alt="LNG Terminal 3" />
</div>
<div id="fade2Image4" style="position:absolute;top:208px;left:0px;">
    <img src="Images/Home/LNG_Terminal_Set/LNGTerminal4.jpg" alt="LNG Terminal 4" />
</div>
<div id="fade3Image1" style="position:absolute;top:416px;left:312px;">
    <img src="Images/Home/Airports/AirPort1.jpg" alt="Air Port 1" />
</div>
<div id="fade3Image2" style="position:absolute;top:416px;left:312px;">
    <img src="Images/Home/Airports/AirPort2.jpg" alt="Air Port 2" />
</div>
<div id="fade3Image3" style="position:absolute;top:416px;left:312px;">
    <img src="Images/Home/Airports/T1_Tracker.jpg" alt="TI Tracker 1" />
</div>
<div id="fade3Image4" style="position:absolute;top:416px;left:312px;">
    <img src="Images/Home/Airports/Targets_Tracked_no_alarm.jpg" alt="TI Tracker 2" />
</div>

以下是JavaScript：

var TimeToFade = 1000.0;
var maxCount;
var count;

function SetVariables()
{
    maxCount = new Array(arguments.length);
    count = arguments.length + 1;

for (var x = 0; x < arguments.length; x++)
{
    maxCount[x] = arguments[x];
}
}

function fade(counter)
{
var eid, countx;

for (var x = 1; x < count; x++)
{
    countx = counter % maxCount[x-1];
    if (countx == 0)
        countx = maxCount[x-1];
    eid = "fade" + x + "Image" + countx;

    var element = document.getElementById(eid);
    if(element == null)
            return;

    if(element.FadeState == null)
    {
            if(element.style.opacity == null 
                || element.style.opacity == '' 
                || element.style.opacity == '1')
        {
            element.FadeState = 2;
        }
        else
        {
            element.FadeState = -2;
        }
    }

    if(element.FadeState == 1 || element.FadeState == -1)
    {
            element.FadeState = element.FadeState == 1 ? -1 : 1;
            element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
    }
    else
    {
            element.FadeState = element.FadeState == 2 ? -1 : 1;
            element.FadeTimeLeft = TimeToFade;
            if (x == 3)
                setTimeout("animateFade(" + new Date().getTime() + ",'" + counter + "')", 33);
    }
}
}

function animateFade(lastTick, counter)
{
var eid, countx;

for (var x = 1; x < count; x++)
{
    countx = counter % maxCount[x-1];
    if (countx == 0)
        countx = maxCount[x-1];
    eid = "fade" + x + "Image" + countx;

    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var element = document.getElementById(eid);

    if(element.FadeTimeLeft <= elapsedTicks)
    {
        element.style.opacity = element.FadeState == 1 ? '1' : '0';
        element.style.filter = 'alpha(opacity = ' 
            + (element.FadeState == 1 ? '100' : '0') + ')';
        element.FadeState = element.FadeState == 1 ? 2 : -2;

        if (element.FadeState == 2 && x == count-1)
        {
            setTimeout(function(){fade(counter)}, 5000);
            hidetext(TextBlock1, TextBlock2, Text2Block1, Text2Block2, Text3Block1, Text3Block2);
        }
        else if (x == count-1)
        {
            counter++;
            fade(counter);
        }

        if (x == count-1)
            return;
    }
    else if (element.FadeTimeLeft > elapsedTicks)
    {
        element.FadeTimeLeft -= elapsedTicks;
        var newOpVal = element.FadeTimeLeft/TimeToFade;
        if(element.FadeState == 1)
            newOpVal = 1 - newOpVal;

        element.style.opacity = newOpVal;
        element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')'; 
    }
}

setTimeout("animateFade(" + curTick + ",'" + counter + "')", 33);
}

function HideAll()
{
for (var i = 0; i < arguments.length; i++)
{
    arguments[i].style.opacity = 0;
    arguments[i].style.filter = 'alpha(opacity = 0)';
    arguments[i].FadeState = -2;
}
setTimeout(function(){fade(1)}, 5000);
}

我看不出我做了什么来产生这个错误;任何帮助将不胜感激。

要查看操作中的代码，请点击here。

Answer 1

这并没有真正回答这个问题，但我从头开始重写了javascript，它似乎有效。所以，为了完整起见，这里是：

var Count = new Array(1, 1, 1);
var MaxCount = new Array(8, 6, 5);
var FadeState = "out";
var FadeTime = new Array(100, 100, 100);

function Fade()
{
for (var x = 0; x < 3; x++)
{
    var id = "fade" + (x+1) + "Image" + Count[x];
    var element = document.getElementById(id)

    if (FadeState == "out")
    {
        if (FadeTime[x] > 0)
        {
            FadeTime[x]-= 5;

            element.style.filter = 'alpha(opacity = ' + FadeTime[x] + ')'; 
            element.style.opacity = FadeTime[x]/100;
        }
        else
        {
            Count[x]++;
            if (Count[x] > MaxCount[x])
                Count[x] = 1;

            if (x == 2)
                FadeState = "back";
        }
    }
    else
    {           
        if (FadeTime[x] < 100)
        {
            FadeTime[x]+= 5;

            element.style.filter = 'alpha(opacity = ' + FadeTime[x] + ')'; 
            element.style.opacity = FadeTime[x]/100;
        }
        else
        {
            if (x == 2)
                FadeState = "pause";
        }
    }
}

switch (FadeState)
{
    case "back":
        FadeState = "in";
        Fade();
        break;
    case "pause":
        FadeState = "out";
        setTimeout(function(){Fade()}, 5000);           
        break;
    default:
        setTimeout(function(){Fade()}, 20);
}
}

function HideAll()
{
for (var i = 0; i < arguments.length; i++)
{
    var element = document.getElementById(arguments[i]);
    element.style.opacity = 0;
    element.style.filter = 'alpha(opacity = 0)';
}
setTimeout(function(){Fade()}, 5000);
}

Answer 2

当您调用HideAll方法

时，需要在ID周围加上引号

HideAll('fade1Image2', 'fade1Image3', 'fade1Image4', 'fade2Image2',
'fade2Image3', 'fade2Image4', 'fade3Image2', 'fade3Image3', 'fade3Image4')

你需要在设置样式之前找到元素。

function HideAll()
{
for (var i = 0; i < arguments.length; i++)
{
    var element = document.getElementById( arguments[i] );
    element.style.opacity = 0;
    element.style.filter = 'alpha(opacity = 0)';
    element.FadeState = -2;
}
setTimeout(function(){fade(1)}, 5000);
}

Javascript淡出产生意外结果

2 个答案: