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，如果要使用name，请使用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); 

---

AHA！

<img id="img_id"/>我们可以通过document.img_id得到，即使是在铬

---

---

OK，OK，辗转联系到该WE TEACH YOU TO FAIL AT WEB DEV网站..