JavaScript 递归问题

Question

我正在尝试编写一个可以在图像数组之间变化的函数。我所拥有的对我来说是有意义的，但是当我按如下方式运行它时，第一个图像会加载，然后第二个图像会在某个时刻加载（透明度不会改变），然后什么也没有发生。下面是 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 很简单。我有两节课； style 和 stylebg。 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：

#slide{
    display:block;
    margin-left:5;
    margin-right:auto;
    border: 1px solid black;
    z-index: 1;
    top: 0px;
    position: relative;
}
#slidebg{
    display:block;
    margin-left:auto;
    margin-right:auto;
    border: 1px solid black;
    z-index: 0;
    top: 0px;
    position: absolute;
}

Answer 1

为了格式化而回答。我还没有调试看看什么会起作用，但这对我来说更有意义

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

这会起作用。不确定这是否是您想要的：http://jsfiddle.net/EcShW/2/

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

Answer 2

您不能仅通过“id”值引用页面元素；您必须使用“document.getElementById()”：

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

然后您将使用“slideElement.style”等而不是“document.slide.style”。

Answer 3

EDIT2

它对我有用（铬）

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

---

啊哈！

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

---

---

可以 好的，好的，删除了此链接 我们教你在 WEB DEV 网站上失败..