Javascript 图像动画在 Firefox 或 Internet Explorer 中不起作用答案

【问题标题】：Javascript Image Animation does not work in Firefox or Internet ExplorerJavascript 图像动画在 Firefox 或 Internet Explorer 中不起作用
【发布时间】：2012-07-13 12:36:35
【问题描述】：

我正在使用以下脚本来生成图像动画。

它适用于 Chrome，但不适用于 Firefox 或 Internet Explorer ...

Javascript

var lista = new Array('image1.gif','image1.gif','image1.gif','image1.gif'); 
var tiempo = 500; 
var tempor = null; 
var pos=0; 
var i = 0; 

function boucle_images(){ 
        var nombre_total_images = 6; 
        document.images.centro.src = lista[i] 
        pos=i; 
        i++; 
        i%=nombre_total_images; 
        tempor=setTimeout("boucle_images()",tiempo); 

} 

function avanza(){ 

  if (pos==(lista.length-1)) 
      pos=0; 
  else 
  pos++; 
  document.images.centro.src = lista[pos] 

} 

function retroceso(){ 

  if (pos==0) 
      pos=(lista.length-1); 
  else 
  pos--; 
  document.images.centro.src = lista[pos] 
} 

function automat(){ 
tempor = setTimeout("boucle_images()", tiempo) 
} 

function parar(){ 
clearTimeout(tempor); 
}

HTML

<table width="52%" border="0" align="center"> 
                <tr> 
                    <td height="482" colspan="2" align="right">
                        <img id="centro" src="imagenes/cargando2.gif" alt="" width="640" height="480" /></td> 
                </tr>
                <tr> 
                    <td align="center"><div class="div_ani_sat">
                        <a href="javascript:retroceso()"><img src="imagenes/atras.png" width="48" height="48" alt="" /></a>
                        <a href="javascript:avanza()"><img src="imagenes/adelante.png" width="48" height="48" alt="" /></a>
                        <a href="javascript:boucle_images()"><img src="imagenes/play.png" width="48" height="48" alt="" /></a>
                        <a href="javascript:parar()"><img src="imagenes/pause.png" width="48" height="48" alt="" /></a></div>
                    </td> 
                </tr> 
            </table>

并不是说我不能在其他浏览器中运行... 你能帮我吗？谢谢

【问题讨论】：

为什么不用document.getElementById('centro').src 而不是document.images.centro 因为document.images 返回一个HTML Collection 我真的很想知道document.images.id 是如何为你工作的。可能是一些 chrome 优化。不要跨浏览器信任它
我做了切换，但还是一样。
究竟会发生什么？您能在控制台中看到任何 javascript 错误吗？在 chrome 中尝试 F12 和 ie。如果没有错误，那么请提及您可以看到 btwn chrome 和 firefox 有什么区别
在 Firefox 和 Internet Explorer 中不会出现动画。控制台没有显示错误。
已分配了与您相同的代码的小提琴，但有一些小修复。已将延迟增加到 5S 但

标签： javascript html image animation

【解决方案1】：

This 是您在 chrome + firefox 中测试的相同代码的工作版本

setTimeout 接受第一个参数作为对函数的引用。所以，我只是将你的tempor=setTimeout("boucle_images()",tiempo) 替换为tempor=setTimeout(boucle_images, tiempo)。始终遵循这个因为它保存了一个评估

document.images 返回一个HTML Collection，您可以像数组一样访问它[但它不是数组]，但不像document.image.centros [至少跨浏览器] 因此我将它修复为document.getElementById('centros')

【讨论】：

@Bcl00 你还有问题吗？
绝对所有的解决方案都不能让它在所有浏览器中工作。另有所求。感谢suguerencias。问候