자바 재귀 문제

Question

이미지 배열간에 변경되는 함수를 작성하려고합니다. 내가 가지고있는 것은 나에게 의미가 있지만, 아래의 경우 첫 번째 이미지가로드되면 두 번째 이미지가로드되고 (투명도는 변경되지 않음) 아무 것도 발생하지 않습니다. 다음은 자바 스크립트 코드입니다.

 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 앞에 있으며 필요에 따라 불투명도와 이미지를 변경합니다. 자바 스크립트는 나에게 논리적 인 것처럼 보이지만 예상대로 작동하지 않습니다. 또한 주목할 가치가있는 것은 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 and such

이것은 뭔가를합니다... 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'); 

그럼 대신 "document.slide.style"의 등 "slideElement.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 사이트에 삭제 링크 ..