获取图像在javascript中的for循环中更改

到目前为止，我创建了一个包含11个图像的数组，初始化了计数器，创建了一个函数，创建了for循环，但这里是我迷路的地方。我查看了互联网上的示例和教程，我可以看到代码看起来很简单，但我没有在这里找到基本的东西。我实际上并不知道如何调用图像的索引。有什么建议么。这是代码。获取图像在javascript中的for循环中更改

<script type="text/javascript"> 
var hammer=new Array("jackhammer0.gif", 
       "jackhammer1.gif", 
       "jackhammer2.gif", 
       "jackhammer3.gif", 
       "jackhammer4.gif", 
       "jackhammer5.gif", 
       "jackhammer6.gif", 
       "jackhammer7.gif", 
       "jackhammer8.gif", 
       "jackhammer9.gif", 
       "jackhammer10.gif") 
var curHammer=0; 

var numImg = 11; 
function getHammer() { 

    for (i = 0; i < hammer.length; i++) 
    { 
    if (curHammer < hammer.length - 1) { 
     curHammer = curHammer +1; 
     hammer[i] = new Image(); 
     hammer[i].src="poses/jackhammer" +(i+1) + ".gif"; 

     var nextHammer = curHammer + 1; 
     nextHammer=0; 
     { 
     } 
    } 
    } 
} 


setTimeout("getHammer()", 5000); 

</script> 
</head> 
<body onload = "getHammer()";> 
<img id="jack" name="jack" src = "poses/jackhammer0.gif" width= "100" height ="113" alt = "Man  and Jackhammer" /><br/> 
<button id="jack" name="jack" onclick="getHammer()">Press button</button>

来源

2011-11-02 swydell

我不知道我为什么会被拒绝，我做的都对。有什么问题 – swydell

这段代码应该做什么？ –

我认为你在for循环中使用了锤子[i] .src，这是什么意思？实际上你需要使用documenmen.getElementById（'IMAGE_ID'）。 – Unknown

继保罗说，这里是什么应该工作的例子：

var hammer=["jackhammer0.gif","jackhammer1.gif","jackhammer2.gif","jackhammer3.gif", 
    "jackhammer4.gif","jackhammer5.gif","jackhammer6.gif","jackhammer7.gif", 
    "jackhammer8.gif","jackhammer9.gif","jackhammer10.gif"]; 

var curHammer=0; 

function getHammer() { 
    if (curHammer < hammer.length) { 
     document.getElementById("jack").src= "poses/" + hammer[curHammer]; 
     curHammer = curHammer + 1; 
    } 
} 

setTimeout("getHammer()", 5000);

大缺少的元素是，你需要调用的getElementById（” jack“）来获取对DOM Image的引用，以便您可以更改它的源代码。如果您使用的是jQuery或其他大多数JS框架，只需键入$（“＃jack”）即可完成。

来源

2011-11-02 05:14:37 pra9ma

看，这就是我正在寻找的逻辑。现在开始有意义了。我以为我需要一个for循环。 – swydell

很高兴提供帮助。不，不需要for循环，因为你用setTimeout设置的定时器就像循环一样，因为它每5秒运行一次。 – pra9ma

我不明白的for循环可言，只是增量指标值curHammer]每次点击的需要，并且如果通过你的最大索引长度（在本例中11）复位。

伪代码：

currentHammer = -1 
    hammers = [ "a1.jpg", "a2.jpg", "a3.jpg"] 

    getHammer() 
    { 
     currentHammer = currentHammer + 1; 
     if(currentHammer > 2) 
      currentHammer = 0; 
     image.src = hammers[currentHammer]; 
    }

来源

2011-11-02 05:05:16

你不需要重置* currentHammer *，只需要'image.src = hammers [++ currentHammer％hammers.length]'这将只返回范围* 0 *到* hammers.length - 1 *的值。 – RobG

谢谢。我在这里错过的是你的逻辑。我认为必须有代码的迭代，这是我for循环的目的。所以你说我不需要它。把它放在代码中会是臃肿的，就是你说的。或者它不会使代码工作？ – swydell

a）你只是想显示一个GIF动画？如果是这样，为什么不使用Adobe的Fireworks并将所有这些gif合并成一个gif？

b）你知道你拥有它的方式显示将疯狂覆盖在一个圆圈的GIF权利？

c）你可能想要延迟（或不）。如果是这样，使负载新gif一个单独的功能，并设置一个超时（或间隔）。

此外，你是多余的。如何更改正在显示的图像的src？：

var jackHammer = new Array（）;
为（VAR I = 0;我< 11;我++）{//预加载图像
气锤[I] =新的图像（）;
jackHammer [i] .src ='/poses/jackHammer'+i.toString()+'.gif';
} //记住没有“/”的“poses”只有在该文件夹位于当前被调用的页面下时才有效。

为（VAR I = 0;我< 11;我++）{//对
的document.getElementById（ 'jhPoses'）更新图像SRC =气锤[I]的.src。
}

在文档本身，

< IMG ID = 'jhPoses' SRC = '1象素transparent.gif' 宽度= 'X' 的高度= 'y' 的ALT = '姿势' 边界=” 0'/>

来源

2011-11-02 05:37:56

获取图像在javascript中的for循环中更改

回答

相关问题