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網站..