2011-12-27 89 views
4

好的,以下代码在IE7 +和Chrome中可以正常工作。 但由于某些原因,xfade在Firefox中未定义功能在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:小时候块内声明的时候

功能不葫芦。

您声明xfadeif块内,但您呼叫的声明,它之前:

setTimeout(xfade, 3500); 

把函数声明在上面。

你必须这样做setOpacity里面xfade<-这不是必需的。

+0

Ahhhh haaaaa。知道了^ _ ^。这是有道理的:-D – Neal 2011-12-27 14:04:26

+0

是的 - 确保在“xfade()”中的所有变量都在适当的范围级别用'var'正确声明是一个非常好的主意。 – Pointy 2011-12-27 14:07:25

+0

@Pointy - 我想你错过了,因为他们被宣布。 – Dementic 2011-12-27 14:18:38

1

修正你的线,说这个:setTimeout("xfade()", 3500);,以配合您的人:

setTimeout(xfade, 3500); 
+0

小提琴已经使用这个版本,但错误仍然存​​在。 – 2011-12-27 14:03:43

+0

我在想什么使它在IE和Chrome中工作。我知道IE使用命名的函数*表达式*做了一些奇怪的事情,但是“xfade”函数只是一个常规的函数声明。 *编辑* - 啊。 :-) – Pointy 2011-12-27 14:04:20

+0

@Pointy请参阅['@ Felix's'答案](http://stackoverflow.com/a/8645473/561731)^ _^ – Neal 2011-12-27 14:05:03

0

改为使用setTimeout(xfade,3500)。