Javascript递归问题

我正在尝试编写一个函数，该函数将在一组图像之间进行更改。我所拥有的对我来说是有意义的，但是当我运行它时，因为它在下面，然后第一个图像加载，然后第二个图像加载在某个点上，透明度没有改变，然后什么都没有发生。以下是javascript代码：

        var image1 = new Image();var image2 = new Image(); var image3 = new Image();
        image1.src = "images/website6.jpg"; image2.src = "images/website7.jpg"; image3.src = "images/sunset.jpg";
        var images = new Array("images/website6.jpg","images/website7.jpg","images/sunset.jpg");
        /*document.slide.style.opacity = 1;
        document.slide.stylebg.opacity = 0;*/
        setTimeout(function() { fade(images,0); }, 2000);
        function delay(arr,num)
        {
            document.slide.src = arr[num % 3];
            document.slide.style.opacity = 1;
            document.slidebg.style.opacity = 0;
            document.slidebg.src = arr[(num+1)%3];
            var number = num + 1;
            setTimeout(function() { fade(arr,number); }, 2000);
        }
        function fade(arr,num)
        {
            /*alert('fadebefore ' + (document.slide.style.opacity).toString())*/
            document.slide.style.opacity -= 0.1
            /*alert('fade')*/
            document.slide.stylebg.opacity += 0.1
            if (document.slide.style.opacity == 0)
            {
                setTimeout(function() { delay(arr,num); }, 150);
            }
            else
            {
                setTimeout(function() { fade(arr,num); }, 1500);
            }
        }

HTML很简单。我有两个班；样式和样式bg。style位于stylebg前面，然后我会根据需要更改不透明度和图像。javascript在我看来似乎是合乎逻辑的，但它并没有像预期的那样工作。另外值得注意的是，这里有3条评论。第一行注释3-4试图将不透明度设置为开始时应该设置的值。然而，如果我这样做，那么我得到的进展甚至比上面的还要少：第一个图像加载，其他什么都没有发生。后两个注释用于调试目的。如果我取消注释这些，那么图像更改发生在两个警报之间，这似乎表明图像更改是由不透明度更改引起的

有人能解释为什么它没有达到我的预期吗？谢谢

编辑：更多代码：

HTML这是唯一受影响的部分：

<div style="position: relative;">
<img src="images/sunset.jpg" id="slide" />
<img src="images/website6.jpg" id="slidebg" />
</div>

CSS:

---

您不能像这样仅仅通过id值引用页面元素；您必须使用document.getElementById：

 var slideElement = document.getElementById('slide'), slidebgElement = document.getElementById('slidebg');

然后使用slideElement.style等，而不是document.slide.style。

EDIT2

它对我有用

啊哈

我们可以通过document.img_id获取，即使是在chromium中

---

好的，好的，删除了指向此站点的链接。

为了格式化而应答。我还没有调试过什么可以工作，但这对我来说更有意义

如果要使用ID，请使用document.getElementById；如果要使用name，请使用document.images[imgname]或document.imagename 你也在混合名字和风格。document.slide.stylebg.opacity等

这有点作用。不确定这是你想要的：

---

---

你的JavaScript代码很奇怪。。你使用Internet Explorer吗？@atlavis不，我不使用，我使用Firefox。这是我第一次写javascript，所以这可能就是为什么它如此奇怪。我很乐意为您解释它的奇怪之处。乍一看，您需要为setTimeout添加一些变量，即变量tid1、tid2、tid3；稍后使用tid1=setTimeout。。。。首次使用setTimeout等on@mplungjan为什么他需要跟踪超时句柄？暂停没有被取消，那有什么意义？@mplungjan我为什么要这么做？我想你只需要这样做，如果以后你想取消超时？或者这只是一种干净的代码，他当然可以@mplungian-再看看-他的图像没有名称属性@mplunjan可以明确指出，只有id值而没有name值的元素不能被称为document对象的成员。@Pointy，我认为这不是问题所在。如果我使用document.slide.style.opacity=0.5更改不透明度，则不透明度将更改。如果你自己尝试，但它仍然不起作用，那么我愿意尝试你的方法，但对我来说它是有效的。@Pointy，如果我不能像上面那样引用它，为什么这会改变不透明度？我希望这听起来不是讽刺：他使用setTimeout很好。另外，.window.setInterval更适合它的名字IMO。不管怎样，我真的很好奇为什么应该避免使用w3schools。我从来没有发现有什么东西工作错误或根本不工作。它从未浪费我的时间。@Atlavi很抱歉，我链接到了错误的站点，而不是我想要的。你可以看看他们编译的东西，看看你是否同意。@Atlavis我完全同意@pointy，看这里-他们延续了坏习惯。我完全按照你说的那样尝试过，但没有改变任何东西。另外，正如下面所说的，我知道我的id/名称有点混合，但为什么下面的工作？您的原始代码有拼写错误。document.slide.stylebg.opacity+=0.1应为document.slide.style.opacity或document.slidebg.style.opacity查看我的小提琴。它确实有效啊，非常感谢，我知道大部分问题在哪里了。它仍然不起作用，但我认为我应该能够从这里找到答案。没有循环-当计数器高于图像时，需要重置计数器。lengthIt是num+1%3，所以不应该重置自身吗？

 var slideElement = document.getElementById('slide'), slidebgElement = document.getElementById('slidebg');

var images = new Array ();
images[0] = new Image();
images[0].src = "images/website6.jpg";
images[1] = new Image();
images[1].src = "images/website7.jpg";
images[2] = new Image();
images[2].src = "images/sunset.jpg";

function delay ( arr, num )
{
  slide.src = arr[num % 3].src;
  slide.style.opacity = 1;
  slidebg.style.opacity = 0;
  slidebg.src = arr[(num+1)%3].src;
  var number = num + 1;
  setTimeout(function() { fade(arr,number); }, 2000);
}

function fade(arr, num)
{
  if ( slide.style.opacity == 0 )
  setTimeout(function (){ delay(arr, num); }, 150);
  else
  {
    slide.style.opacity = (slide.style.opacity*10 - 1)/10 ;
    slidebg.style.opacity -= -0.1;
    setTimeout ( function(){fade(arr,num);}, 1500 );
  }
}
fade (images, 0);

<div style="position: relative;">
<img src="images/sunset.jpg" id="slide" name="slide" />
<img src="images/website6.jpg" id="slidebg" name="slidebg" />
</div>


    var images = []; // can be more elegant, but this is simpler
    images[0]=new Image(); images[0].src="images/website6.jpg";
    images[1]=new Image(); images[1].src="images/website7.jpg";
    images[2]=new Image(); images[2].src="images/sunset.jpg"; 
    var tid1,tid2,tid3
    tid1=setTimeout(function() { fade(images,0); }, 2000);
    function delay(arr,num)
    {
        document.slide.src = arr[num % 3].src;
        document.slide.style.opacity = 1;
        document.slidebg.style.opacity = 0;
        document.slidebg.src = arr[(num+1)%3].src;
        var number = num + 1;
        tid2=setTimeout(function() { fade(arr,number); }, 2000);
    }
    function fade(arr,num)
    {
        document.slide.style.opacity -= 0.1
        document.stylebg.style.opacity += 0.1
        if (document.slide.style.opacity == 0)
        {
            tid3=setTimeout(function() { delay(arr,num); }, 150);
        }
        else
        {
            tid3=setTimeout(function() { fade(arr,num); }, 1500);
        }
    }