2011-12-27 6 views
4

다음 코드는 IE7 + 및 Chrome에서 정상적으로 작동합니다. 하지만 어떤 이유로, xfade함수는 Firefox에서만 정의되지 않았습니다.

<html> 
    <body> 
     <div id="slider"></div> 
     <script type="text/javascript"> 
var Klimateka = { 
    Slider: function() { 
     // Check if we have a slider div on page 
     var slider = document.getElementById('slider'); 
     if (slider != null) { 
      var images = ["slide-image-1.jpg", "slide-image-2.jpg", "slide-image-3.jpg", "slide-image-4.jpg"]; 
      var i = images.length; 
      while (i) { 
       i -= 1; 
       var img = document.createElement("img"); 
       img.src = "images/" + images[i]; 
       slider.appendChild(img); 
      } 
      var d = document, imgs = new Array(), zInterval = null, current = 0, pause = false; 
      imgs = d.getElementById("slider").getElementsByTagName("img"); 
      for (i = 1; i < imgs.length; i++) imgs[i].xOpacity = 0; 
      imgs[0].style.display = "block"; 
      imgs[0].xOpacity = .99; 

      setTimeout("xfade()", 3500); 

      function xfade() { 
       cOpacity = imgs[current].xOpacity; 
       nIndex = imgs[current + 1] ? current + 1 : 0; 

       nOpacity = imgs[nIndex].xOpacity; 

       cOpacity -= .05; 
       nOpacity += .05; 

       imgs[nIndex].style.display = "block"; 
       imgs[current].xOpacity = cOpacity; 
       imgs[nIndex].xOpacity = nOpacity; 

       setOpacity(imgs[current]); 
       setOpacity(imgs[nIndex]); 

       if (cOpacity <= 0) { 
        imgs[current].style.display = "none"; 
        current = nIndex; 
        setTimeout(xfade, 3500); 
       } else { 
        setTimeout(xfade, 50); 
       } 

       function setOpacity(obj) { 
        if (obj.xOpacity > .99) { 
         obj.xOpacity = .99; 
         return; 
        } 
        obj.style.opacity = obj.xOpacity; 
        obj.style.MozOpacity = obj.xOpacity; 
        obj.style.filter = "alpha(opacity=" + (obj.xOpacity * 100) + ")"; 
       } 
      } 
     } 
    }, 

    bar: function() { 
    } 
}; 

Klimateka.Slider(); 

내가 설정 테스트를위한 jsfiddler가 파이어 폭스에서 정의되지 않는다 : http://jsfiddle.net/rTtKh/10/

답변

5

This might only apply to Firefox : 아이 블록 내에서 선언 할 때

기능을 게양하지 않습니다.

당신은 if 블록 내부 xfade 선언,하지만 당신은 이전에 선언에 요구하고있다 :

setTimeout(xfade, 3500); 

이 위에 함수 선언을 넣습니다.

xfade 안에 setOpacity과 동일하게 입력해야합니다.<- 그럴 필요는 없습니다.

+0

Ahhhh haaaaa. 알았어.^_ ^. -D – Neal

+0

예 - "xfade()"의 모든 변수가 적절한 범위 수준에서'var'로 적절하게 선언되는지 확인하는 것이 좋습니다. – Pointy

+0

@Pointy - 선언 했으므로 놓친 것 같아요. – Dementic

1

즉이 말한다 당신의 라인을 수정 : setTimeout("xfade()", 3500);이 다른 사람에 맞게 :

setTimeout(xfade, 3500); 
+0

바이올린은 이미이 버전을 사용하고 있지만 오류는 여전히 존재합니다. –

+0

IE와 Chrome에서 어떤 점이 효과가 있는지 궁금합니다. IE는 명명 된 함수 * 표현식 *으로 기괴한 것들을 수행하지만, "xfade"함수는 단지 정규 함수 선언 일뿐입니다. * 편집 * - 아. :-) – Pointy

+0

@ Pointy ['@ Felix의 답변] 참조 (http://stackoverflow.com/a/8645473/561731)^_^ – Neal

0

대신 setTimeout (xfade, 3500)을 사용하십시오.

관련 문제